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 .

  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.

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.