table pagination javascript
- Published
- Reading time
- 2 min read
- Length
- 356 words
On this page
Table Pagination with Javascript#
Pagination is very important when it comes to displaying huge data in a table. It helps to make the table easy to read and navigate. In this blog post, we will discuss how to implement table pagination with Javascript.
Step 1: HTML Table#
We need an HTML table to display data. We will create a sample table with 10 rows and 3 columns.
<table id="myTable">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>25</td>
<td>USA</td>
</tr>
<tr>
<td>Mike</td>
<td>30</td>
<td>Canada</td>
</tr>
...
</tbody>
</table>Step 2: Javascript Code#
We will use Javascript to implement table pagination. We will create a function called paginate() that will handle the pagination logic.
function paginate(pageNum){
var rowsPerPage = 5; // number of rows to show per page
var myTable = document.getElementById("myTable");
var rows = myTable.getElementsByTagName("tr");
var totalPages = Math.ceil((rows.length-1) / rowsPerPage); // -1 to exclude the table header row
var startIndex = (pageNum - 1) * rowsPerPage + 1;
var endIndex = startIndex + rowsPerPage - 1;
if(endIndex > rows.length) endIndex = rows.length-1; // adjust endIndex if it exceeds the number of rows
// loop through all the rows and hide/show them based on the page number
for(var i=1; i= startIndex && i <= endIndex){
rows[i].style.display = "table-row";
} else {
rows[i].style.display = "none";
}
}
// display the pagination links
var paginationLinks = "";
for(var i=1; i<=totalPages; i++){
if(i == pageNum){
paginationLinks += "<span>" + i + "</span>";
} else {
paginationLinks += "<a href='javascript:paginate(" + i + ")'>" + i + "</a>";
}
}
document.getElementById("pagination").innerHTML = paginationLinks;
}Step 3: Pagination Links#
We need to display the pagination links somewhere in the HTML. We will create a div with an id of "pagination" where we will display the links.
<div id="pagination"></div>Step 4: Testing#
Now we can test our pagination by calling the paginate() function with a page number as an argument. For example, to display the first page, we will call paginate(1).
<button onclick="paginate(1)">First Page</button>
<button onclick="paginate(2)">Second Page</button>
...That's it! Now we have implemented table pagination with Javascript.