Customizable Client Side Table Pagination Plugin With jQuery

A lightweight yet customizable table paginator that lets you divide a large number of table rows into pages to enhance the visibility of your large HTML table.

See Also:

• 10 Best JavaScript Plugins To Paginate Large HTML Table

How to use it:

1. Download the package and load the table-pagination.js script after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/table-pagination.js"></script>

2. Initialize the plugin on your HTML table.

<table id="myTable">
  ...
</table>

$(function(){
  $('#myTable').createTablePagination();
});

3. Set the number of records per page. Default: 25.

$(function(){
  $('#myTable').createTablePagination({
    rowPerPage: 20,
  });
});

4. Customize the styles of the pagination control.

$(function(){
  $('#myTable').createTablePagination({
    paginationColor: '#6f7ad7',
    fontColor: '#555555',
    paginationStyle: 'borderless', // or 'bordered'
  });
});

5. Set the fade in time (in milliseconds) when transitioning between pages. Default: 200.

$(function(){
  $('#myTable').createTablePagination({
    transitionDuration: 500,
  });
});

6. Determine whether to display a page number input which allows you to jump to the specified page. Default: false.

$(function(){
  $('#myTable').createTablePagination({
    jumpPage: true,
  });
});

---

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