Simple Client-side HTML Table Pagination With JQuery

Last updated Jul 9, 2019

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.

ntegrate 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.

Bootstrap CSS HTML