Bootstrap Paginator使用案例

       页面html 需要用ul标签

<ul id=‘d-fieldpage‘></ul>

可查看官方文档

var loadPaginator = function () {
var total = Math.ceil(d_ftotalCount / d_fpageSize);     // 总页数=总条数/每页展示数据
var options = {
bootstrapMajorVersion: 3,
currentPage: d_findexPage,
totalPages: total,
numberOfPages: 5,   //展示几个
size: ‘normal‘,
alignment: ‘right‘,    //靠右
itemContainerClass: function (type, page, current) {
return (page === current) ? "active" : "pointer-cursor";
},

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) {
d_findexPage = page;//当前页数
d_fpageSize = d_fpageSize;//设置页面大小
d_fieldList(d_findexPage, d_fpageSize, null, null, null)  //  点击当前页的回调函数
}
}
$("#d-fieldpage").bootstrapPaginator(options);
};

var d_ftotalCount = 10;//out传递当前总数
var d_findexPage = 1;//当前索引
var d_fpageSize = 10;//设置分页大小

    回调函数  

function d_fieldList(d_findexPage, d_fpageSize, fieldname, username, projectid) {
var f_bodyhtml = "";
$("#f-bodylist").html("");
//列表数据
$.post("/Field/GetFieldList", { page: d_findexPage, rows: d_fpageSize, fieldname: fieldname, username: username, projectid: projectid }, function (data) {
if (data.count > 0) {
data.data.forEach(function (point, i) {

   //  分页展示的内容

f_bodyhtml += "<tr>";
f_bodyhtml += "<td>" + parseInt(i + 1) + "</td>";
f_bodyhtml += "<td>" + point.f_nickname + "</td>";
f_bodyhtml += "<td>" + point.username + "</td>";
f_bodyhtml += "<td>" + point.u_mobile + "</td>";
f_bodyhtml += "<td>" + point.f_crop + "</td>";
f_bodyhtml += "<td>" + point.f_area + "</td>";
f_bodyhtml += "<td>" + formatterDate(point.f_createtime) + "</td>";
f_bodyhtml += "<td class=‘f-td-click‘d-fid=" + point.autoid + ">详细</td>";
f_bodyhtml += "</tr>";
});
d_ftotalCount = data.count;   //返回的总数据
$("#f-bodylist").html(f_bodyhtml);

} else {
d_ftotalCount = 1;
}
loadPaginator();
});

}

//初始化页面

d_fieldList(1,10,null,null, null)

Bootstrap Paginator使用案例

原文：https://www.cnblogs.com/iwenchao/p/9040927.html