需先引入jQuery,再引入pagination组件
<script src="jquery.js"></script>
<script src="jquery.pagination.js"></script>
组件样式与功能分离,自定义样式(注:这里加样式是为了示例看的清楚,操作方便。)
更新日志
- 2018-01-12 增加固定页码数量功能
- 2018-01-11 修复超过1页时不会自动显示bug
- 2017-09-27 优化分页逻辑
- 2017-03-27 更新api参数,增加是否保持上下页按钮,为0时不显示分页
- 2016-08-11 修复总数据为0时不显示分页,修复总数据为1时显示默认总页数bug,改成不显示分页。
当前是第 5页
HTML
<div class="M-box"></div>
Javascript
$('.M-box').pagination({
callback: function (api) {
$('.now').text(api.getCurrent());
}
}, function (api) {
$('.now').text(api.getCurrent());
});
固定页码数量,切换或者增加首页末页按钮数量都不变
HTML
<div class="M-box11"></div>
Javascript
$('.M-box11').pagination({
mode: 'fixed'
});
开启第一页和最后一页的按钮,并且内容可自定义。内容默认为1和总页数。(注:如coping为false,homePage和endPage无效。)
HTML
<div class="M-box2"></div>
Javascript
$('.M-box2').pagination({
coping: true,
homePage: '首页',
endPage: '末页',
prevContent: '上页',
nextContent: '下页'
});
总数据 100条,每页显示 5条,总页数为 20页
如果配置了数据总数和当前一页显示多少条数据,总页数会自动计算,这种情况下再配置总页数无效。
(注:数据总数totalData和每页显示的条数showData必须同时配置,否则默认使用总页数pageCount。)
HTML
<div class="M-box1"></div>
Javascript
$('.M-box1').pagination({
totalData: 100,
showData: 5,
coping: true
});
参数:jump,开启跳转到第几页,跳转按钮文本内容可修改。(如果超出最大页数会变成总页数的值)
HTML
<div class="M-box3"></div>
Javascript
$('.M-box3').pagination({
pageCount: 50,
jump: true,
coping: true,
homePage: '首页',
endPage: '末页',
prevContent: '上页',
nextContent: '下页',
callback: function (api) {
console.log(api.getCurrent())
}
});
ajax请求,打开控制台查看Network
HTML
<div class="M-box4"></div>
Javascript
$('.M-box5').pagination({
pageCount: 50,
jump: true,
callback: function (api) {
var data = {
page: api.getCurrent(),
name: 'mss',
say: 'oh'
};
$.getJSON('https://www.easy-mock.com/mock/58fff7a5739ac1685205ad5d/example/pagination#!method=get', data, function (json) {
console.log(json);
});
}
});
options(参数配置)
参数 | 默认值 | 说明 |
pageCount | 9 | 总页数 |
totalData | 0 | 数据总条数 |
current | 1 | 当前第几页 |
showData | 0 | 每页显示的条数 |
prevCls | 'prev' | 上一页class |
nextCls | 'next' | 下一页class |
prevContent | '<' | 上一页节点内容 |
nextContent | '>' | 下一页节点内容 |
activeCls | 'active' | 当前页选中状态class名 |
mode | 'unfixed' | 模式,unfixed不固定页码按钮数量,fixed固定数量 |
count | 4 | mode为unfixed时显示当前选中页前后页数,mode为fixed显示页码总数 |
coping | false | 是否开启首页和末页,值为boolean |
isHide | false | 总页数为0或1时隐藏分页控件 |
keepShowPN | false | 是否一直显示上一页下一页 |
homePage | '' | 首页节点内容,默认为空 |
endPage | '' | 尾页节点内容,默认为空 |
jump | false | 是否开启跳转到指定页数,值为boolean类型 |
jumpIptCls | 'jump-ipt' | 文本框内容 |
jumpBtnCls | 'jump-btn' | 跳转按钮class |
jumpBtn | '跳转' | 跳转按钮文本内容 |
callback | function(){} | 回调函数,参数"index"为当前页 |
api接口
方法 | 参数 | 说明 |
getPageCount() | 无 | 获取总页数 |
setPageCount(page) | page:页数 | 设置总页数 |
getCurrent() | 无 | 获取当前页 |