bootstrap-paginator分页插件使用

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;
}
});

});

效果:

bootstrap-paginator分页插件使用

bootstrap-paginator分页插件使用