Easy Large Table Pagination With jQuery - tablePagination.js

A tiny and easy-to-use jQuery table pagination plugin that applies a configurable pagination control to your large HTML table for saving page space and improving readability.

Works with the native HTML table tag and without having to modify any code on your webpage. Just apply the pagination function to the existing HTML table and the plugin will do the rest.

How to use it:

1. Download the plugin and then include the main JavaScript jquery.tablePagination.js after loading jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.tablePagination.js"></script>

2. Apply the pagination plugin to your HTML table and determine how many rows to display per page. Default: 20.

<table class="table">
  ... html table here ...
</table>

$('table').tablePagination({
  perPage: 10
});

3. Determine which page to display on page load. Default: 1(Page 1).

$('table').tablePagination({
  initPage: 3
});

4. Change the position of the table pagination. Default: 'bottom'.

$('table').tablePagination({
  position: 'top'
});

5. Determine whether to show a link that enables the user to reveal all table rows. Default: true.

$('table').tablePagination({
  showAllButton: false
});

6. Override the default CSS class applied to the table pagiantion.

$('table').tablePagination({
  paginationClass: 'tablePagination'
});

7. Apply your own CSS styles to the pagination links.

.tablePagination {
  padding-left: 0;
  margin-top: 1em;
}

.tablePagination:before {
  content:"Pages: ";
}

.tablePagination li {
  cursor: pointer;
  display: inline-block;
  list-style: none;
  padding: 2px 9px;
}

.tablePagination li:hover {
  background: #eee;
}

.tablePagination .current {
  background: #26b;
  color: #fff;
}

---

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