Create Pagination Table in jQuery, CSS, Bootstrap
Pagination is very important part to display lot’s of content in single page. If you want to display large pagination table data you must go with dynamic pagination using php. But if you have some table data where you want to apply pagination then you can simply create jquery method to show hide data act like pagination which help your website user navigate easily. So in this tutorial I am going share simple jquery, css, bootstrap based pagination which you can apply on your website html table and make it Pagination Table .
Libraries
You have to include some dependent libraries which help us to create and design Pagination Table.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> |
HTML
Create simple html table with some sample data where we have to apply jquery function and make it Pagination Table.
<div class="container"> <h2>Select Number Of Rows</h2> <div class="form-group"> <!-- Show Numbers Of Rows --> <select class ="form-control" name="state" id="maxRows"> <option value="5000">Show ALL Rows</option> <option value="5">5</option> <option value="10">10</option> <option value="15">15</option> <option value="20">20</option> <option value="50">50</option> <option value="70">70</option> <option value="100">100</option> </select> </div> <table class="table table-striped table-class" id= "table-id"> <tr> <th>Name</th> <th>Email</th> <th>Phone</th> <th>Date</th> </tr> <tr> <td>Rajah Armstrong</td> <td>erat.neque@noncursusnon.ca</td> <td>1-636-140-1210</td> <td>Oct 26, 2015</td> </tr> <tr> <td>Kuame Parsons</td> <td>non.sapien@in.com</td> <td>1-962-122-8834</td> <td>Aug 2, 2015</td> </tr> <tr> <td>Ira Parker</td> <td>Vivamus.molestie.dapibus@quisturpisvitae.edu</td> <td>1-584-906-8572</td> <td>Sep 15, 2015</td> </tr> <tr> <td>Dante Carlson</td> <td>dis.parturient@mi.co.uk</td> <td>1-364-156-9666</td> <td>Nov 28, 2015</td> </tr> <tr> <td>Nathan Bernard</td> <td>Etiam.vestibulum.massa@nonummy.net</td> <td>1-646-420-3211</td> <td>Aug 4, 2016</td> </tr> <tr> <td>Dillon Poole</td> <td>eget@vitae.ca</td> <td>1-788-762-3800</td> <td>Apr 25, 2016</td> </tr> <tr> <td>Hu Leach</td> <td>ligula.eu.enim@eu.org</td> <td>1-888-617-5106</td> <td>Nov 3, 2015</td> </tr> <tr> <td>Dean Lucas</td> <td>ligula.Nullam.feugiat@orciUt.org</td> <td>1-176-725-3287</td> <td>Mar 10, 2016</td> </tr> <tr> <td>Dorian Durham</td> <td>at@conubianostraper.org</td> <td>1-867-829-4207</td> <td>Nov 11, 2016</td> </tr> </table> <!-- Start Pagination --> <div class='pagination-container' > <nav> <ul class="pagination"> <li data-page="prev" > <span> < <span class="sr-only">(current)</span></span> </li> <!-- Here the JS Function Will Add the Rows --> <li data-page="next" id="prev"> <span> > <span class="sr-only">(current)</span></span> </li> </ul> </nav> </div> </div> |
CSS
Styling your page and Pagination page count.
body{ background-color: #eee; } table th , table td{ text-align: center; } table tr:nth-child(even){ background-color: #BEF2F5 } .pagination li:hover{ cursor: pointer; } |
JQuery
Copy the below jquery code script and paste it on page. replace the classes and id’s with your table or make it same.
<script> getPagination('#table-id'); //getPagination('.table-class'); //getPagination('table'); function getPagination (table){ var lastPage = 1 ; $('#maxRows').on('change',function(evt){ //$('.paginationprev').html(''); lastPage = 1 ; $('.pagination').find("li").slice(1, -1).remove(); var trnum = 0 ; var maxRows = parseInt($(this).val()); if(maxRows == 5000 ){ $('.pagination').hide(); }else { $('.pagination').show(); } var totalRows = $(table+' tbody tr').length; $(table+' tr:gt(0)').each(function(){ trnum++; if (trnum > maxRows ){ $(this).hide(); }if (trnum <= maxRows ){$(this).show();} }); if (totalRows > maxRows){ var pagenum = Math.ceil(totalRows/maxRows); for (var i = 1; i <= pagenum ;){ $('.pagination #prev').before('<li data-page="'+i+'">\ <span>'+ i++ +'<span class="sr-only">(current)</span></span>\ </li>').show(); } } // end if row count > max rows $('.pagination [data-page="1"]').addClass('active'); $('.pagination li').on('click',function(evt){ evt.stopImmediatePropagation(); evt.preventDefault(); var pageNum = $(this).attr('data-page'); var maxRows = parseInt($('#maxRows').val()); if(pageNum == "prev" ){ if(lastPage == 1 ){return;} pageNum = --lastPage ; } if(pageNum == "next" ){ if(lastPage == ($('.pagination li').length -2) ){return;} pageNum = ++lastPage ; } lastPage = pageNum ; var trIndex = 0 ; $('.pagination li').removeClass('active'); $('.pagination [data-page="'+lastPage+'"]').addClass('active'); // $(this).addClass('active'); $(table+' tr:gt(0)').each(function(){ trIndex++; if (trIndex > (maxRows*pageNum) || trIndex <= ((maxRows*pageNum)-maxRows)){ $(this).hide(); }else {$(this).show();} }); }); }).val(5).change(); } $(function(){ $('table tr:eq(0)').prepend('<th> ID </th>') var id = 0; $('table tr:gt(0)').each(function(){ id++ $(this).prepend('<td>'+id+'</td>'); }); }); </script> |
See live demo and download source code.
DEMO | DOWNLOAD
This awesome script developed by yasser-mas, Visit their official codepen repository for more information and follow for future updates.
