1.导入bootstrap-paginator.js和bootstrapv3.min.css
<script src="<%=path %>/static/js/bootstrap-paginator.js"></script>
<link href="<%=path %>/static/css/bootstrapv3.min.css" rel="stylesheet" type="text/css"/>
2.分页div
<div style="text-align: center"> <ul id="paging"></ul></div>
3.分页启动函数
$(function(){
$('#paging').bootstrapPaginator({
currentPage: ${page.pageNum},
totalPages: ${page.pages},
size:"normal",
bootstrapMajorVersion: 3,
alignment:"right",
numberOfPages:5,
shouldShowPage:true,
itemTexts: function (type, page, current) {
switch (type) {
case "first": return "首页";
case "prev": return "上一页";
case "next": return "下一页";
case "last": return "末页";
case "page": return page;
}
},
//点击事件
onPageClicked: function (event, originalEvent, type, page) {
var loginName = $("#suname").val();
location.href="<%=request.getContextPath()%>/dlrz/list?pageNum=" + page+"&loginName="+loginName;
}
});
});
效果: