How to Add Pagination in HTML Table ?

Last Updated : 07 Mar, 2024

Pagination is a common feature in web applications, especially when dealing with large datasets. It helps in dividing the data into manageable chunks, improving the user experience by reducing the amount of data displayed at once and speeding up page loading times. In this article, we will discuss the approach to add pagination to an HTML table using JavaScript.

Add Pagination in HTML Table using JavaScript

We will create a basic HTML table and add pagination functionality using JavaScript.

Example:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Pagination with JavaScript</title> 
    <style> 
        table { 
            margin: auto; 
        } 
  
        #pagination { 
            text-align: center; 
        } 
          
        table, 
        th, 
        td { 
            border: 1px solid black; 
            border-collapse: collapse; 
        } 
  
        th, 
        td { 
            padding: 10px; 
        } 
    </style> 
</head> 
  
<body> 
    <table id="myTable"> 
        <tr> 
            <th>Name</th> 
            <th>Email</th> 
            <th>City</th> 
        </tr> 
        <!-- Table rows will be added dynamically -->
    </table> 
    <div id="pagination"></div> 
  
    <script> 
        const data = [ 
            { name: "ABC", email: "xyz@geeksforgeeks.org", city: "Noida" }, 
            { name: "XYZ", email: "xyz@geeksforgeeks.org", city: "Noida" }, 
            { name: "ABC", email: "xyz@geeksforgeeks.org", city: "Noida" }, 
            { name: "XYZ", email: "xyz@geeksforgeeks.org", city: "Noida" }, 
            { name: "ABC", email: "xyz@geeksforgeeks.org", city: "Noida" }, 
            { name: "XYZ", email: "xyz@geeksforgeeks.org", city: "Noida" }, 
            { name: "ABC", email: "xyz@geeksforgeeks.org", city: "Noida" }, 
            { name: "XYZ", email: "xyz@geeksforgeeks.org", city: "Noida" }, 
            { name: "ABC", email: "xyz@geeksforgeeks.org", city: "Noida" }, 
            { name: "XYZ", email: "xyz@geeksforgeeks.org", city: "Noida" }, 
            { name: "ABC", email: "xyz@geeksforgeeks.org", city: "Noida" }, 
            { name: "XYZ", email: "xyz@geeksforgeeks.org", city: "Noida" }, 
            { name: "ABC", email: "xyz@geeksforgeeks.org", city: "Noida" }, 
            { name: "XYZ", email: "xyz@geeksforgeeks.org", city: "Noida" }, 
            { name: "ABC", email: "xyz@geeksforgeeks.org", city: "Noida" }, 
            { name: "XYZ", email: "xyz@geeksforgeeks.org", city: "Noida" } 
        ]; 
  
        const rowsPerPage = 5; 
        let currentPage = 1; 
  
        function displayTable(page) { 
            const table = document.getElementById("myTable"); 
            const startIndex = (page - 1) * rowsPerPage; 
            const endIndex = startIndex + rowsPerPage; 
            const slicedData = data.slice(startIndex, endIndex); 
  
            // Clear existing table rows 
            table.innerHTML = ` 
        <tr> 
            <th>Name</th> 
            <th>Email</th> 
            <th>City</th> 
        </tr> 
    `; 
  
            // Add new rows to the table 
            slicedData.forEach(item => { 
                const row = table.insertRow(); 
                const nameCell = row.insertCell(0); 
                const emailCell = row.insertCell(1); 
                const cityCell = row.insertCell(2); 
                nameCell.innerHTML = item.name; 
                emailCell.innerHTML = item.email; 
                cityCell.innerHTML = item.city; 
            }); 
  
            // Update pagination 
            updatePagination(page); 
        } 
  
        function updatePagination(currentPage) { 
            const pageCount = Math.ceil(data.length / rowsPerPage); 
            const paginationContainer = document.getElementById("pagination"); 
            paginationContainer.innerHTML = ""; 
  
            for (let i = 1; i <= pageCount; i++) { 
                const pageLink = document.createElement("a"); 
                pageLink.href = "#"; 
                pageLink.innerText = i; 
                pageLink.onclick = function () { 
                    displayTable(i); 
                }; 
                if (i === currentPage) { 
                    pageLink.style.fontWeight = "bold"; 
                } 
                paginationContainer.appendChild(pageLink); 
                paginationContainer.appendChild(document.createTextNode(" ")); 
            } 
        } 
  
        // Initial display 
        displayTable(currentPage); 
    </script> 
</body> 
  
</html>

Output

table-pagination

Explanation

The displayTable function takes the current page number as a parameter, calculates the start and end indices for slicing the data, and then dynamically creates table rows for the sliced data.
The updatePagination function generates pagination links based on the total number of pages and updates the current page link to be bold.
We call displayTable initially with the first page to display the table and pagination links.