🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

SimplePagination is a really simple jQuery plugin used to add pagination to your large Html table with very little effort.

Pagination table-pagination

Documentation

jQuery SimplePagination

SimplePagination is a small jQuery plugin that can paginate a large HTML table. You can specify the number of rows to show per page and the styling for the pagination features.

Setup

Include the plugin after the jQuery library:

<script src="/path/to/jquery.js"></script> <script src="/path/to/jquery.simplePagination.js"></script>

Usage

Create your HTML table.

<table id="pages"> 	<tr> 		<td>First</td> 		<td>William Hartnell</td> 	</tr> 	<tr> 		<td>Second</td> 		<td>Patrick Troughton</td> 	</tr> 	.. 	<tr> 		<td>Twelfth</td> 		<td>Peter Capaldi</td> 	</tr> </table>

Give the table some pages:

$("#pages").simplePagination();

This will add pagination buttons below your table along with text for the row count and current page.

Let's show ten (10) records per page, start on the second page, and add Bootstrap styling to the pagination buttons:

$("#pages").simplePagination({   perPage: 10,   currentPage: 2,   previousButtonClass: "btn btn-default btn-xs",   nextButtonClass: "btn btn-default btn-xs" });

Options

Name Type Description Values Default
perPage Number The number of rows per page Number 5
containerClass String Class name(s) for the pagination containing div String ''
previousButtonClass String Class name(s) for the previous button String ''
nextButtonClass String Class name(s) for the next button String ''
previousButtonText String The text to show on the previous button String 'Previous'
nextButtonText String The text to show on the next button String 'Next'
currentPage Number The page to begin on Number 1

Demo

Working samples can be seen here.


You May Also Like