How to Add Pagination to HTML Tables Using JavaScript
In this Javascript tutorial, we will see how to create pagination buttons for HTML table with JavaScript.
This JavaScript code adds pagination functionality to a table of product data, allowing users to navigate through multiple pages of data. It dynamically generates page navigation buttons and shows the relevant rows based on the selected page.
Project Source Code:
<!DOCTYPE html>
<html>
<head>
<title>Pagination</title>
<style>
table{width: 25%; border: 1px solid #555}
table tr{border: 1px solid #555}
table td{border: 1px solid #555}
.page-nav{background-color: yellowgreen; width: 25%; display: flex;
flex-wrap: wrap; justify-content: center}
.page-nav button{background-color: #333; color: #fff;}
.page-nav button:hover{background-color: rgb(119, 16, 16); color: #fff;
cursor: pointer;}
</style>
</head>
<body>
<table id="table">
<thead>
<tr>
<th>Product</th>
<th>Stock</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Product 1</td>
<td>10</td>
<td>$11</td>
</tr>
<tr>
<td>Product 2</td>
<td>20</td>
<td>$331</td>
</tr>
<tr>
<td>Product 3</td>
<td>25</td>
<td>$14</td>
</tr>
<tr>
<td>Product 4</td>
<td>99</td>
<td>$73</td>
</tr>
<tr>
<td>Product 5</td>
<td>14</td>
<td>$30</td>
</tr>
<tr>
<td>Product 6</td>
<td>44</td>
<td>$22</td>
</tr>
<tr>
<td>Product 7</td>
<td>77</td>
<td>$33</td>
</tr>
<tr>
<td>Product 8</td>
<td>57</td>
<td>$62</td>
</tr>
<tr>
<td>Product 9</td>
<td>76</td>
<td>$59</td>
</tr>
<tr>
<td>Product 10</td>
<td>27</td>
<td>$42</td>
</tr>
<tr>
<td>Product 11</td>
<td>151</td>
<td>$36</td>
</tr>
<tr>
<td>Product 12</td>
<td>96</td>
<td>$80</td>
</tr>
<tr>
<td>Product 13</td>
<td>85</td>
<td>$32</td>
</tr>
<tr>
<td>Product 14</td>
<td>35</td>
<td>$75</td>
</tr>
</tbody>
</table>
<script>
// select the table and its rows
const table = document.getElementById('table');
const rows = table.querySelectorAll('tbody tr');
// set the number of rows per page and initialize the current page to 1
const rowsPerPage = 5;
let currentPage = 1;
// create a new div to hold the page navigation buttons
const pageNav = document.createElement('div');
pageNav.classList.add('page-nav');
table.parentNode.insertBefore(pageNav, table.nextSibling);
// function to show the rows of the current page
const showPage = (page)=>{
// set the current page to the one specified
currentPage = page;
// calculate the start and end indexes of the rows to display
const startIndex = (page - 1) * rowsPerPage;
const endIndex = startIndex + rowsPerPage;
// hide all rows
for(let i = 0; i < rows.length; i++){
rows[i].style.display = "none";
}
// display the rows within the selected range
for(let i = startIndex; i < endIndex; i++){
if(rows[i]){
rows[i].style.display = "table-row";
}
}
// update the current page button
const buttons = document.querySelectorAll(".page-nav button");
for(let i = 0; i < buttons.length; i++){
buttons[i].classList.remove("current-page");
}
// if the table is not empty
if(rows.length > 0)
{
document.querySelector(`#page-${currentPage}`).classList.add("current-page");
}
}
// function to create the page buttons
const createPageButtons = () => {
// calculate the total number of pages
const pages = Math.ceil(rows.length / rowsPerPage);
// create a button for each page
for(let i = 1; i <= pages; i++)
{
const button = document.createElement("button");
// set the ID of the button to "page-x", where x is the page number
button.id = `page-${i}`;
// set the button text to the page number
button.textContent = i;
// set the class of the first button to "current-page"
if(i === 1)
{
button.classList.add("current-page");
}
// add an event listener to the button that calls showPage()
// with the corresponding page number
button.addEventListener("click",() => {
showPage(i);
});
// append the button to the page navigation div
pageNav.appendChild(button);
}
}
// call createPageButtons() to create the initial set of page buttons
createPageButtons();
// call showPage() with an argument of 1 to display the first page of rows
showPage(1);
</script>
</body>
</html>
Code Explanation:
this JavaScript code, allows users to create a table with pagination.
This JavaScript code performs the following actions:
1 - Select Table Rows: Choose the table with the ID "table" and select all its rows in the tbody.
2 - Pagination Setup: Specify the number of rows per page (rowsPerPage) and start on page 1.
3 - Create Page Navigation: Generate a new <div> for page navigation buttons below the table.
Define a function to make these buttons.
4 - Show Page Function: Create a function to show rows for the current page.
Calculate start and end indexes.
Hide all rows and show the selected range.
Update the "current-page" class for the navigation button.
5 - Generate Page Buttons: Calculate total pages based on rows and rows per page.
Make buttons for each page.
Set button IDs to "page-x," where x is the page number.
Add event listeners to call showPage for each page.
Append buttons to the navigation div.
OUTPUT:
