使用jQuery插件的表分页

Question

I have created a json table.For that I am trying to add pagination using plugin,This is the first time I am using plugin and I don't know how to combine table with pager.please give me some ideas.

I am using this plugin http://www.jqueryscript.net/other/Simple-Customizable-Pagination-Plugin-with-jQuery-Bootstrap-Twbs-Pagination.html
If there are any other methods to do it please suggest to me.

$(document).ready(function(){
pagination()
window.pagObj = $('#pager').twbsPagination({
            itemsPerPage: 3,
            itemsContainer: ".myTable",
            // item: "> div",
            totalPages: 3,
            visiblePages: 2,
            onPageClick: function (event, page) {
                console.info(page + ' (from options)');
            }
        }).on('page', function (event, page) {
            console.info(page + ' (from event listening)');
        });
});
function pagination(){
    for(var i=0;i<userDetails.length;i++){
    var tab='<tr id="row'+i+'"><td>'+userDetails[i].Sno+"\n"+'</td><td>'+userDetails[i].empId+"\n"+'</td><td>'+userDetails[i].Firstname+"\n"+'</td><td>'+userDetails[i].email+"\n"+'</td><td>'
              +userDetails[i].phone+"\n"+'</td><td>'+userDetails[i].designation+"\n"+'</td><td>'+userDetails[i].projectAllocated+"\n"+'</td><td><button class="btn btn-info edit" data-toggle="modal"  data-target="#myModal" data-html="true">'+
              userDetails[i].edit +'</button><button class="btn btn-warning  dlt">'+userDetails[i].remove +'</button></td></tr>';

     $('#myTable').append(tab);

}
}

My code: https://jsfiddle.net/4597shdo/

Answer 1

We Can use paginga.jquery.min.js plugin for simple pagination

 var userDetails=[ { "Sno":"1", "empId":"Emp001122", "name":"john", "email":"john@fusiongts.com", "phone": "9876543210", "designation":"designer", "projectAllocated":"xxx", "edit":"Edit", "remove":"Delete" }, { "Sno":"2", "empId":"Emp002233", "name":"mano", "email":"mano@fusiongts.com", "phone": "9876543210", "designation":"developer", "projectAllocated":"yyy", "edit":"Edit", "remove":"Delete" }, { "Sno":"3", "empId":"Emp002233", "name":"mano", "email":"mano@fusiongts.com", "phone": "9876543210", "designation":"developer", "projectAllocated":"yyy", "edit":"Edit", "remove":"Delete" }, { "Sno":"4", "empId":"Emp002233", "name":"mano", "email":"mano@fusiongts.com", "phone": "9876543210", "designation":"developer", "projectAllocated":"yyy", "edit":"Edit", "remove":"Delete" }, { "Sno":"5", "empId":"Emp002233", "name":"mano", "email":"mano@fusiongts.com", "phone": "9876543210", "designation":"developer", "projectAllocated":"yyy", "edit":"Edit", "remove":"Delete" }, { "Sno":"6", "empId":"Emp001144", "name":"justin", "email":"justin@fusiongts.com", "phone": "9876543210", "designation":"HR", "projectAllocated":"zzz", "edit":"Edit", "remove":"Delete" }, { "Sno":"7", "empId":"Emp001166", "name":"guna", "email":"guna@fusiongts.com", "phone": "9876543210", "designation":"designer", "projectAllocated":"ggg", "edit":"Edit", "remove":"Delete" }, { "Sno":"8", "empId":"Emp001122", "name":"john", "email":"john@fusiongts.com", "phone": "9876543210", "designation":"designer", "projectAllocated":"xxx", "edit":"Edit", "remove":"Delete" }, { "Sno":"9", "empId":"Emp002233", "name":"mano", "email":"mano@fusiongts.com", "phone": "9876543210", "designation":"developer", "projectAllocated":"yyy", "edit":"Edit", "remove":"Delete" } ]; $(document).ready(function(){ pagination() }) function pagination(){ for(var i=0;i<userDetails.length;i++){ var tab='<tr id="row'+i+'"><td>'+userDetails[i].Sno+"\\n"+'</td><td>'+userDetails[i].empId+"\\n"+'</td><td>'+userDetails[i].Firstname+"\\n"+'</td><td>'+userDetails[i].email+"\\n"+'</td><td>' +userDetails[i].phone+"\\n"+'</td><td>'+userDetails[i].designation+"\\n"+'</td><td>'+userDetails[i].projectAllocated+"\\n"+'</td><td><button class="btn btn-info edit" data-toggle="modal" data-target="#myModal" data-html="true">'+ userDetails[i].edit +'</button><button class="btn btn-warning dlt">'+userDetails[i].remove +'</button></td></tr>'; $('#content').append(tab); } } 

 .pager div{ float: left; border: 1px solid gray; margin: 5px; padding: 10px; color: blue; } .pager div.disabled{ opacity: 0.25; } .pager .pageNumbers a{ display: inline-block; padding: 0 10px; color: blue; } .pager .pageNumbers a.active{ color: orange; } .pager { overflow: hidden; } .paginate-no-scroll .items div{ height: 250px; } tr,table,td,th{ border:1px solid #000; padding:5px; } 

 <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="css/style.css"> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="js/paginga.jquery.min.js"></script> <script type="text/javascript" src="js/script.js"></script> </head> <body> <div class="paginate 1" > <div class="items" id="content"> </div> <div class="pager"> <div class="firstPage">&laquo;</div> <div class="previousPage">&lsaquo;</div> <div class="pageNumbers"></div> <div class="nextPage">&rsaquo;</div> <div class="lastPage">&raquo;</div> </div> </div> <script> $(function() { $(".paginate").paginga({ item: "> tr", itemsPerPage: 5, maxPageNumbers:3 }); }); </script> </body> </html>