分页有两种方式:
1. 前台分页:ajax一次请求获取全部数据,适合少量数据(万条数据以下);
后台接口地址
dataType: "json",success: function (msg) {
var pages = Math.ceil(msg.data / 5);//data是数据总量
var element = $('#id');//对应ul的id
element.bootstrapPaginator({
bootstrapMajorVersion: 3,//bootstrap版本
currentPage: page,//当前页面
numberOfPages: 5,//一页显示几个按钮(在ul里面生成5个li)
totalPages: pages //总页数
});
}
});
分页的HTML部分要求使用ul标签;2. 前台写分页算法。
2. 后台分页:发送多次ajax,每次获取指定页数的数据(万条数据以上)。
页码
totalPages: data.cn,//总页数(后台传过来的数据)
numberOfPages: 5,//一页显示几个按钮
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) {
$.ajax({
url: '../../interface/xw_zxdt_list.PHP',type: 'post',data: {page: page},dataType: 'json',success: function (data) {
tplData(data);//处理成功返回的数据
}
});
}
});
分页的HTML部分要求使用ul标签;2. 后台写分页算法。
ps:下面看下bootstrap-paginator 分页控件的使用
首先对js和css的引用
如果bootstrapMajorVersion:1 时,则上面的分页标签用 div
如果bootstrapMajorVersion:3 时,则上面的分页标签用 ul
其中:currentPage 是当前你所在的页数 numberOfPages 是分页按钮可见的最多数 totalPages 是所有数据能分的页数(这些 options(选项)是在初始化分页控件的时候使用的。)
在onPageClicked 事件中 page 参数标识你点击页数时所在的页数。
完整代码如下:
<Meta charset="utf-8"/>
总结
以上所述是小编给大家介绍的bootstrap paginator分页插件的两种使用方式实例详解。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。