If you want to add quick pagination on your large HTML table then In this post I am going to share simple jquery plugin to make Simple Client-side HTML Table Pagination With JQuery. Using this plugin you can easily convert your large html table into pagination table with custom numbers or rows per page.
Integrate Simple Client-side HTML Table Pagination With JQuery
Integration of this plugin is quite simple and clean see below steps.
Libraries
First include dependent libraries jquery + jquery-ui on page after that add paging.js.
<script src="//code.jquery.com/jquery-latest.min.js">script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js">script> <script type="text/javascript" src="paging.js">script> |
HTML
Here I created sample html table which i need to convert in paging table.
<table id="tableData"> > |
>
| S. No. | Article Submission Site | Page Rank |
|---|---|---|
| 1 | http://www.sites.google.com/ | 9 |
| 2 | http://www.examiner.com/ | 8 |
| 3 | http://www.livejournal.com/ | 8 |
| 4 | http://www.tumblr.com/ | 8 |
| 5 | http://www.storify.com/ | 8 |
| 6 | http://www.github.com/ | 8 |
| 7 | http://www.merchantcircle.com/ | 8 |
| 8 | http://www.newsvine.com/ | 7 |
| 9 | https://www.wattpad.com/ | 7 |
CSS
Styling html table and pagination nav bars.
JS
Finally call the plugin on page and set rows limit par page.
<script type="text/javascript"> $(document).ready(function() { $('#tableData').paging({limit:10}); }); script> |
See live demo and download source code.
See official github repository for more information and follow for future updates. Don’t forget to read license for using above plugin in your commercial project.