一.引入jquery.pagination.js , pagination.css
二. html
//显示数据
<div class="list">
<ul></ul>
</div>
//分页
<div class="eg" style="display: inline-table; margin-bottom: 20px; margin-left: 10px;margin-right: 10px;">
<div class="m-style M-box4"></div>
</div>
三.js
//内容总数
var newIdMax=${count};
//总页数
var pageCount=${pageCount};
//初始化分页
$('.M-box4').pagination({
pageCount: pageCount,
jump: true,
count: 2,
callback: function (api) {
var data = {
pageNum: api.getCurrent()
};
//获取数据
getDate(data);
}
});
// 获取每页数据
function getDate(data){
$.getJSON(
'url',
data,
function (list) {
console.log(list);
setListDate(list);
});
}
//显示每页数据
function setListDate(list){
var $list = $(".list ul");
$list.empty();
for(var j = 0; j<list.length;j++){
var $content = $('<li></li>');
$list.append($content);
}
}
// 第一页数据
var data = {
pageNum: 1
};
getDate(data);