有关jqPaginator的相关资料查阅 http://jqpaginator.keenwon.com/
使用：1.首先引入jQuery和jqPaginator，注意路径
<script src="{{__HOST__}}/assets/js/jqPaginator.js"></script>
2.在页面中加入：
<div id="paginate">
<div id="page" class="pagination"></div>
<div class="hr hr32 hr-dotted"></div>
</div>
一般的使用方式：
$('#id').jqPaginator({
totalPages: 100, //总页数
visiblePages: 10, //每页显示的数量
currentPage: 1, //当前页
onPageChange: function (num, type) {
$('#text').html('当前第' + num + '页');
}
});
由于我需要搭配项目，页面第一次使用后台渲染，然后在再用ajax请求，所以当第展示第二页数据的时候就使用ajax了，下面直接上代码：
<script type="text/javascript">
$('#page').jqPaginator({
totalPages:{{totalPages}},
visiblePages: 10,
currentPage:{{currentPage}},
onPageChange: function (num, type) {
if (type == "change") {
$.ajax({
type: "get",
url: 'http://localhost:3001/api/v1/inn',
data: num,
dataType: "json",
success: function (data) {
$('#sample-table-1 tbody').empty('');
for (var i = 0;i < data.list.length;i++) {
//判断是否有undefined
data.list[i].trend = data.list[i].trend == undefined ? "":data.list[i].trend
// console.log(data.list[i])
var $tr = $("<tr>"+
"<td>"+data.list[i].username+"</td>"+
"<td>"+data.list[i].username+"</td>"+
"<td>"+data.list[i].sgv+"</td>"+
"<td>"+data.list[i].device+"</td>"+
"<td>"+data.list[i].type+"</td>"+
"<td>"+data.list[i].dateString+"</td>"+
"<td>"+data.list[i].trend+"</td>"+
+"</tr>");
$('#sample-table-1 tbody').append($tr)
}
$('#sample-table-1 tbody').append($tr)
}
})
}
}
});
</script>
上面是为了能够进行查询后再进行分页的操作。可以先让后台渲染号好页面，然后在调用下一页的时候将页面中包含数据的部分使用ajax请求的新数据替换掉，这样就可以做到查询数据之后再进行分页了，下面是查询后再分页的ajax操作
<script type="text/javascript">
$("#submit").on("click",function(){
var content = $(".nav-search-input").val()
$('#page').jqPaginator({
totalPages:{{totalPages}},
visiblePages: 10,
currentPage:{{currentPage}},
onPageChange: function (num, type) {
// if(type == 'change') {
$.ajax({
url: 'http://localhost:3001/api/v1/search/se',
type: "post",
contentType: "application/x-www-form-urlencoded; charset=utf-8",
data: {
num: num,
searchKey: content
},
dataType: "json",
success: function (data) {
// console.log(data.totalPages)
$('#sample-table-1 tbody').empty('');
for (var i = 0; i < data.list.length; i++) {
//判断是否有undefined
data.list[i].trend = data.list[i].trend == undefined ? "":data.list[i].trend
var $tr = $("<tr>" +
// "<td>" + data.list[i].ttqId + "</td>" +
"<td>" + data.list[i].username + "</td>" +
"<td>" + data.list[i].sgv + "</td>" +
"<td>" + data.list[i].device + "</td>" +
"<td>" + data.list[i].type + "</td>" +
"<td>" + data.list[i].dateString + "</td>" +
"<td>" + data.list[i].trend + "</td>" +
+"</tr>");
$('#sample-table-1 tbody').append($tr)
}
}
})
// }
}
})
})
</script>
