之所以写这篇博客,是因为前段时间有用到pagination.js,网上的各种配置使用方法,但我发现多个版本使用方法有出入,所有写下这篇博客,供以后查看。
注:此插件基于jq,必须先引入jq才能正常使用。
引入pagination.js;pagination.css;
插件链接:https://github.com/ljzy1026/pagination
- html
一个id为pagination的div
- js
// 初始化分页模块
// sort是本项目ajax请求需要的一个参数
function pageStart(sort) {
var container = $('#pagination');
// sort需要定义才能被回调函数获取到
var sort = sort || 11;
// 初始化
container.pagination({
// 数据源,好几种写法(直接写数组;写函数中包含ajax请求;直接写url)
dataSource: '/essaymanage/getessaylist?status=-1&sort=' + sort,
// 数据最终来源 res.data
locator: 'data',
// 总数,一般都是从后台拿的(写死是totalNumber参数)
totalNumberLocator: function(response) {
return response.num;
},
// 每页条目数
pageSize: 10,
// 起始页数
pageNumber: 1,
// 参数名一般有变化,给上面两个参数起别名
alias: {
pageNumber: 'page',
pageSize: 'size'
},
// 上一页文本
prevText: '<',
// 下一页文本
nextText: '>',
ajax: {
beforeSend: function() {
container.prev().html('Loading data from flickr.com ...');
}
},
// 回调函数
callback: function(res, pagination) {
console.log(sort);
// 先清空显示区域
$('.tb tr:gt(0)').hide();
// 循环拿数据,插入数据
for (var i = 0; i < res['length']; i++) {
// 拿数据,处理数据...
}
}
})
}
pageStart();
- css(自定义css)
最终效果