分页有两种方式：
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 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
原文链接：https://www.f2er.com/bootstrap/35215.html