使用 jquery 插件的表格分页

Question

我创建了一个json表。为此我正在尝试使用插件添加分页，这是我第一次使用插件，我不知道如何将表与分页器结合起来。请给我一些想法。
我正在使用这个插件http://www.jqueryscript.net/other/Simple-Customizable-Pagination-Plugin-with-jQuery-Bootstrap-Twbs-Pagination.html
如果有任何其他方法可以做到这一点，请给我建议。

$(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);

}
}

我的代码：https://jsfiddle.net/4597shdo/

Answer 1

我们可以使用paginga.jquery.min.js插件进行简单的分页

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>