1、下载http://plugins.jquery.com/bootstrap-paginator/
2、引用<script src="/static/bootstrap/js/bootstrap-paginator.min.js"></script>
3、首先定义一个html标签ul用以显示分页<ul style="margin: 0;" id="bp-3-Paginator-sm"></ul>
4、定义一个公共的js方法用来控制分页信息
//显示分页信息
function pageInfo(totalNum, page_size, currentPage){
//分页显示数据
var options = {
size : "small",//设置显示大小
bootstrapMajorVersion : 3,
currentPage : currentPage||1,//设置当前页，默认起始页为第一页
numberOfPages : 5,//每次展示多少页
totalPages : Math.ceil(totalNum/page_size),//总页数
alignment : "left",//显示位置
useBootstrapTooltip : false,//是否显示tip提示框
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(e,originalEvent,type,page){//点击页数时，触发该方法
var page_size = $("#page_size").val();
test(page_size, page);//调用ajax方法,如果这里还需要校验查询条件的话，可以写个单独的js方法，在此处调用该方法，在校验方法中去调用ajax方法
},
};
$(‘#bp-3-Paginator-sm‘).bootstrapPaginator(options);
}
5、页面加载的时候显示方式
$(function() {
pageInfo(totalNum, page_size, 1);//默认显示第一页
});
6、ajax方式显示
function test(page_size, page_index){
$.ajax({
url:"",//请求URL
type:‘GET‘, //请求方法
data:{"param1" : value1},//请求参数
dataType:"json", //返回的数据格式：json/xml/html/script/jsonp/text
beforeSend:function(xhr){
//请求之前要做的事情,此操作的结果不会影响下面方法的执行
},
success:function(data,textStatus,jqXHR){
//请求成功要做的事情
//关于总数据多少，每页显示多少数据，总工多少页，这些数据在这边更新
pageInfo(data.totalNum, page_size, page_index)
return false;
},
error:function(xhr,textStatus){
//请求异常做的事情
return false;
},
complete:function(){
//最后要做的事情
}});
}
