我已经创建了一个json表。为此我尝试使用插件添加分页,这是我第一次使用插件而且我不知道如何将表与pager结合起来。请给我一些想法。
我正在使用此插件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);
}
}
答案 0 :(得分:0)
我们可以使用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);
}
}
&#13;
.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;
}
&#13;
<!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">«</div>
<div class="previousPage">‹</div>
<div class="pageNumbers"></div>
<div class="nextPage">›</div>
<div class="lastPage">»</div>
</div>
</div>
<script>
$(function() {
$(".paginate").paginga({
item: "> tr",
itemsPerPage: 5,
maxPageNumbers:3
});
});
</script>
</body>
</html>
&#13;