Simple Client-side HTML Table Pagination With JQuery

0 265

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.

HTML Table Pagination With JQuery

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.

Leave A Reply

Your email address will not be published.