頁面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使用案例