Paginated Table Template

Effortlessly handle large datasets by splitting your table into manageable pages.

This template provides a complete client-side pagination solution, allowing users to navigate through hundreds of rows using "Previous" and "Next" buttons and page numbers.

Screenshot of a table with pagination controls (Previous, 1, 2, 3, Next) at the bottom.

Get Source Code → Preview →

About this Paginated Table

Displaying hundreds or thousands of rows at once can cripple browser performance and overwhelm users. Pagination solves this by showing only a small, manageable subset of rows at a time (e.g., 10 rows per page). This template provides a self-contained solution using vanilla JavaScript.

How it works:

The JavaScript first determines the total number of rows and calculates the total number of pages needed.
It dynamically generates the pagination controls (page numbers and next/previous buttons).
An event listener waits for a control to be clicked.
When a page is selected, the script shows only the rows corresponding to that page and hides all others.

Key Features:

Improved Performance: Prevents the browser from struggling to render thousands of DOM elements at once.
Better User Experience: Breaks down intimidating datasets into digestible chunks.
Dynamic Controls: The pagination buttons are generated automatically based on the number of rows.
Dependency-Free: Built with vanilla JavaScript, requiring no external libraries.

Implementation Notes:

Similar to the filterable table, this client-side pagination is best suited for datasets up to several hundred or a few thousand rows. For extremely large datasets (10,000+ rows), true server-side pagination is the professional standard. This involves fetching only the data for the current page from the database, which is far more performant.

Code

Here's the full code, including the HTML, CSS, and JavaScript required for the paginated table:

<table class="paginated-table" id="myPaginatedTable">
    <thead>
        <tr>
            <th scope="col">ID</th>
            <th scope="col">Name</th>
            <th scope="col">Location</th>
        </tr>
    </thead>
    <tbody>
        
        <tr><td>1</td><td>City Park</td><td>Downtown</td></tr>
        <tr><td>2</td><td>Oakwood Nature Preserve</td><td>North Suburbs</td></tr>
        <tr><td>3</td><td>Riverside Walkway</td><td>River District</td></tr>
        <tr><td>4</td><td>Maple Hill</td><td>Uptown</td></tr>
        <tr><td>5</td><td>Lakeside Trail</td><td>West End</td></tr>
        <tr><td>6</td><td>Green Valley</td><td>East End</td></tr>
        <tr><td>7</td><td>Pine Ridge Forest</td><td>North Suburbs</td></tr>
        <tr><td>8</td><td>Historic Downtown Square</td><td>Downtown</td></tr>
        <tr><td>9</td><td>West End Gardens</td><td>West End</td></tr>
        <tr><td>10</td><td>Central Station Plaza</td><td>Downtown</td></tr>
        <tr><td>11</td><td>Hilltop Lookout</td><td>Uptown</td></tr>
        <tr><td>12</td><td>River Bend Park</td><td>River District</td></tr>
    </tbody>
</table>

<div class="pagination-container" id="paginationControls"></div>

const tbody = table.querySelector('tbody');
    const rows = Array.from(tbody.querySelectorAll('tr'));
    const totalPages = Math.ceil(rows.length / rowsPerPage);
    let currentPage = 1;
    
    const paginationControls = document.getElementById('paginationControls');

function displayPage(page) {
        currentPage = page;
        // Hide all rows
        rows.forEach(row => row.style.display = 'none');
        
        // Calculate which rows to show
        const startIndex = (page - 1) * rowsPerPage;
        const endIndex = startIndex + rowsPerPage;
        const pageRows = rows.slice(startIndex, endIndex);

// Show the rows for the current page
        pageRows.forEach(row => row.style.display = '');
        
        renderControls();
    }
    
    function renderControls() {
        paginationControls.innerHTML = '';
        
        // Previous Button
        const prevButton = document.createElement('button');
        prevButton.innerHTML = '&laquo; Prev';
        prevButton.disabled = currentPage === 1;
        prevButton.addEventListener('click', () => displayPage(currentPage - 1));
        paginationControls.appendChild(prevButton);

// Page Number Buttons
        for (let i = 1; i <= totalPages; i++) {
            const pageButton = document.createElement('button');
            pageButton.innerText = i;
            if (i === currentPage) {
                pageButton.classList.add('active');
            }
            pageButton.addEventListener('click', () => displayPage(i));
            paginationControls.appendChild(pageButton);
        }
        
        // Next Button
        const nextButton = document.createElement('button');
        nextButton.innerHTML = 'Next &raquo;';
        nextButton.disabled = currentPage === totalPages;
        nextButton.addEventListener('click', () => displayPage(currentPage + 1));
        paginationControls.appendChild(nextButton);
    }
    
    // Initial display
    displayPage(1);
}

// Initialize the paginator for the table with an ID 'myPaginatedTable'
// Show 5 rows per page
paginateTable('myPaginatedTable', 5);

</script>

View Output