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'); /* PAGINATION - on change max rows select options fade out all rows gt option value mx = 5 - append pagination list as per numbers of rows / max rows option (20row/5= 4pages ) - each pagination li on click -> fade out all tr gt max rows * li num and (5*pagenum 2 = 10 rows) - fade out all tr lt max rows * li num - max rows ((5*pagenum 2 = 10) - 5) - fade in all tr between (maxRows*PageNum) and (maxRows*pageNum)- MaxRows */ function getPagination (table){ var lastPage = 1 ; $('#maxRows').on('change',function(evt){ //$('.paginationprev').html(''); // reset pagination lastPage = 1 ; $('.pagination').find("li").slice(1, -1).remove(); var trnum = 0 ; // reset tr counter var maxRows = parseInt($(this).val()); // get Max Rows from select option if(maxRows == 5000 ){ $('.pagination').hide(); }else { $('.pagination').show(); } var totalRows = $(table+' tbody tr').length; // numbers of rows $(table+' tr:gt(0)').each(function(){ // each TR in table and not the header trnum++; // Start Counter if (trnum > maxRows ){ // if tr number gt maxRows $(this).hide(); // fade it out }if (trnum <= maxRows ){$(this).show();}// else fade in Important in case if it .. }); // was fade out to fade it in if (totalRows > maxRows){ // if tr total rows gt max rows option var pagenum = Math.ceil(totalRows/maxRows); // ceil total(rows/maxrows) to get .. // numbers of pages for (var i = 1; i <= pagenum ;){ // for each page append pagination li $('.pagination #prev').before('<li data-page="'+i+'">\ <span>'+ i++ +'<span class="sr-only">(current)</span></span>\ </li>').show(); } // end for i } // end if row count > max rows $('.pagination [data-page="1"]').addClass('active'); // add active class to the first li $('.pagination li').on('click',function(evt){ // on click each page evt.stopImmediatePropagation(); evt.preventDefault(); var pageNum = $(this).attr('data-page'); // get it's number var maxRows = parseInt($('#maxRows').val()); // get Max Rows from select option 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 ; // reset tr counter $('.pagination li').removeClass('active'); // remove active class from all li $('.pagination [data-page="'+lastPage+'"]').addClass('active');// add active class to the clicked // $(this).addClass('active'); // add active class to the clicked $(table+' tr:gt(0)').each(function(){ // each tr in table not the header trIndex++; // tr index counter // if tr index gt maxRows*pageNum or lt maxRows*pageNum-maxRows fade if out if (trIndex > (maxRows*pageNum) || trIndex <= ((maxRows*pageNum)-maxRows)){ $(this).hide(); }else {$(this).show();} //else fade in }); // end of for each tr in table }); // end of on click pagination list }).val(5).change(); // end of on select change // END OF PAGINATION } $(function(){ // Just to append id number for each row $('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.
