使用jqPaginator分页

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	(无)	回调函数，当换页时触发（包括初始化第一页的时候），会传入"目标页"的页码

效果图