jQuery and CSS Based Table Pagination Plugin - Table Pager

Table Pager is a simple jQuery plugin which you can use as an table pager, the beauty is that the script is very simple to understand (and commented) and it doesn't require extra plugins (except jquery plugin).

How to use it:

1. Create a standard data table with lots of records.

<table>
  <tr>
    <td>1</td>
    <td>Naam</td>
    <td>test</td>
    <td>test1</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Naam</td>
    <td>test</td>
    <td>test2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Naam</td>
    <td>test</td>
    <td>test3</td>
  </tr>
  ...
</table>

2. Create next/prev controls for the paginated table.

<a class="previous">Previous</a>
<a class="next">Next</a>
<input type="hidden" id="hdnActivePage" value="1">

3. The required CSS to hide the table rows.

table tr { display: none; }

table tr:nth-child(-n+8) { display: table-row; }

4. Include the latest version of jQuery Javascript library at the end of your web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

5. Add the following Javascript snippets into your web page and set the number of records per page using pageSize option.

$(document).ready(function () {
// number of records per page
var pageSize = 5;
// reset current page counter on load
$("#hdnActivePage").val(1);
// calculate number of pages
var numberOfPages = $('table tr').length / pageSize;
numberOfPages = numberOfPages.toFixed();
// action on 'next' click
$("a.next").on('click', function () {
// show only the necessary rows based upon activePage and Pagesize
$("table tr:nth-child(-n+" + (($("#hdnActivePage").val() * pageSize) + pageSize) + ")").show();
$("table tr:nth-child(-n+" + $("#hdnActivePage").val() * pageSize + ")").hide();
var currentPage = Number($("#hdnActivePage").val());
// update activepage
$("#hdnActivePage").val(Number($("#hdnActivePage").val()) + 1);
// check if previous page button is necessary (not on first page)
if ($("#hdnActivePage").val() != "1") {
$("a.previous").show();
$("span").show();
}
// check if next page button is necessary (not on last page)
if ($("#hdnActivePage").val() == numberOfPages) {
$("a.next").hide();
$("span").hide();
}
});
// action on 'previous' click
$("a.previous").on('click', function () {
var currentPage = Number($("#hdnActivePage").val());
$("#hdnActivePage").val(currentPage - 1);
// first hide all rows
$("table tr").hide();
// and only turn on visibility on necessary rows
$("table tr:nth-child(-n+" + ($("#hdnActivePage").val() * pageSize) + ")").show();
$("table tr:nth-child(-n+" + (($("#hdnActivePage").val() * pageSize) - pageSize) + ")").hide();
// check if previous button is necessary (not on first page)
if ($("#hdnActivePage").val() == "1") {
$("a.previous").hide();
$("span").hide();
} 
// check if next button is necessary (not on last page)
if ($("#hdnActivePage").val() < numberOfPages) {
$("a.next").show();
$("span").show();
} 
if ($("#hdnActivePage").val() == 1) {
$("span").hide();
}
});
});

About author:

Author: Jan van Os

Website: http://www.janvanos.nl

---

This awesome jQuery plugin is developed by Jan van Os. For more Advanced Usages, please check the demo page or visit the official website.