Simple Client-side HTML Table Pagination With JQuery
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"> <thead> <tr> <th>S. No.</th> <th>Article Submission Site</th> <th>Page Rank</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>http://www.sites.google.com/</td> <td>9</td> </tr> <tr> <td>2</td> <td>http://www.examiner.com/</td> <td>8</td> </tr> <tr> <td>3</td> <td>http://www.livejournal.com/</td> <td>8</td> </tr> <tr> <td>4</td> <td>http://www.tumblr.com/</td> <td>8</td> </tr> <tr> <td>5</td> <td>http://www.storify.com/</td> <td>8</td> </tr> <tr> <td>6</td> <td>http://www.github.com/</td> <td>8</td> </tr> <tr> <td>7</td> <td>http://www.merchantcircle.com/</td> <td>8</td> </tr> <tr> <td>8</td> <td>http://www.newsvine.com/</td> <td>7</td> </tr> <tr> <td>9</td> <td>https://www.wattpad.com/</td> <td>7</td> </tr> </tbody> </table> |
CSS
Styling html table and pagination nav bars.
<style type="text/css"> .paging-nav { text-align: right; padding-top: 2px; } .paging-nav a{ margin: auto 1px; text-decoration: none; display: inline-block; padding: 1px 7px; background: #91b9e6; color: white; border-radius: 3px; } .paging-nav .selected-page{ background: #187ed5; font-weight: bold; } .paging-nav, #tableData { width: 400px; margin: 0 auto; font-family: Arial, sans-serif; } #tableData { margin-top: 100px; border-spacing: 0; border: 1px dotted #ccc; } #tableData th { background: #e5f0fb; text-align: left; border-bottom: 2px solid #91b9e6; } #tableData td { padding: 3px 10px; border-bottom: 1px dotted #ccd; } </style> |
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.
DEMO | DOWNLOAD
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.