jsp导入jqPaginator-blue.css(可自定义样式)和jqPaginator.js
jsp代码
<table>
</table>
<div id="pagination" style="text-align:center">
<ul class="pagination" id="footPage"></ul>
</div>
js代码
`$('#footPage').jqPaginator({
//pageCount为查询结果数量经过计算后的总页数
totalPages: pageCount,
visiblePages: 5,
currentPage: 1,
first: '<li class="first"><a href="javascript:void(0);">首页</a></li>',
prev: '<li class="prev"><a href="javascript:void(0);">上一页</a></li>',
next: '<li class="next"><a href="javascript:void(0);">下一页</a></li>',
last: '<li class="last"><a href="javascript:void(0);">末页</a></li>',
page: '<li class="page"><a href="javascript:void(0);">{{page}}</a></li>',
onPageChange: function (num) {
//查询方法loadHistoryDutyRecord();
loadHistoryDutyRecord(num);
}
});`
参数
参数 默认值 说明
totalPages 0 设置分页的总页数
totalCounts 0 设置分页的总条目数
pageSize 0 设置每一页的条目数
注意:要么设置totalPages,要么设置totalCounts + pageSize,否则报错;设置了totalCounts和pageSize后,会自动计算出totalPages。
currentPage 1 设置当前的页码
visiblePages 7 设置最多显示的页码数(例如有100也,当前第1页,则显示1 - 7页)
disableClass 'disabled' 设置首页,上一页,下一页,末页的"禁用状态"样式
activeClass 'active' 设置当前页码样式
first (无) 设置"首页"的Html结构
prev (无) 设置"上一页"的Html结构
next (无) 设置"下一页"的Html结构
last (无) 设置"末页"的Html结构
page (无) 设置页码的Html结构,其中可以使用{{page}}代表当前页,{{totalPages}}代表总页数,{{totalCounts}}代表总条目数(例如:上面的"极简风格"的Demo,就是使用了{{占位符}},并将visiblePages设为1实现的。)
wrapper (无) 分页结构的Html包裹,例如:<div class="your class"></div>,一般不会用到
onPageChange (无) 回调函数,当换页时触发(包括初始化第一页的时候),会传入"目标页"的页码
效果图