前言
原始分頁結果
這是第1頁的序號，為1-4。
這是第2頁的序號，為5-8。
這是server分頁的第1頁，序號為1-4。
這是server分頁的第5頁，序號也為1-4。
解決步驟
出現這個問題的原因是什么呢，由于我們使用的formatter返回的index參數，這個參數是表格的索引，client的所有n條總數據都在客戶端，index就為1-n，而server分頁每次服務器只返回的是當前頁的數據到客戶端，所以index就只有1-pageSize，pageSize為一頁的數據量，所以就出現這個問題了。
針對server服務器只返回一頁的數據的原因導致每次翻頁的序號都從1開始的問題，那么我們就需要把服務端和客戶端的頁面數據關聯起來，所以我們在原始的formatter的基礎上修改，讓它傳遞這個參數就ok了。
首先我們看boostrap table的js源碼，可以看到一些內部函數的寫法，如：
BootstrapTable.prototype.showRow = function (params) { this.toggleRow(params, true); };那么我們可以自己定義一個功能函數嗎？答案是肯定的，我們也照著寫一個返回我們需要的索引值的函數。定義如下：
BootstrapTable.prototype.getPage = function (param) { return this.options.pageSize * this.options.pageNumber + 1; }我們能寫這個函數傳遞索引參數的原因是，pageSize和pageNumber本身就是bootstrap table的內部參數，全部都集成在options中，所以你有這個參數我才能寫函數返回這個值。
寫好函數還得把這個函數寫進內部函數列表中，不然也用不了，如下把getIndex像它原來的函數那樣插入進去（第四行）：
var allowedMethods = [ 'getOptions', 'getSelections', 'getAllSelections', 'getData', 'getIndex', 'load', 'append', 'prepend', 'remove', 'removeAll', 'insertRow', 'updateRow', 'updateCell', 'updateByUniqueId', 'removeByUniqueId', 'getRowByUniqueId', 'showRow', 'hideRow', 'getHiddenRows', 'mergeCells', 'checkAll', 'uncheckAll', 'checkInvert', 'check', 'uncheck', 'checkBy', 'uncheckBy', 'refresh', 'resetView', 'resetWidth', 'destroy', 'showLoading', 'hideLoading', 'showColumn', 'hideColumn', 'getHiddenColumns', 'getVisibleColumns', 'showAllColumns', 'hideAllColumns', 'filterBy', 'scrollTo', 'getScrollPosition', 'selectPage', 'prevPage', 'nextPage', 'togglePagination', 'toggleView', 'refreshOptions', 'resetSearch', 'expandRow', 'collapseRow', 'expandAllRows', 'collapseAllRows', 'updateFormatText' ];
這樣我們就可以在表中使用，在formatter中使用了getIndex方法，實現了分頁序號的連續（editable: {…}是行編輯，請查看我另一篇博客）：
$("tb_departments").bootstrapTable({ method: 'post', //請求方式 height: 500, toolbar: '#toolbar', //工具按鈕用哪個容器 striped: true, //是否顯示行間隔色 cache: false, //是否使用緩存，默認為true，所以一般情況下需要設置一下這個屬性（*） pagination: true, //是否顯示分頁 sortable: true, //是否啟用排序 sortOrder: "asc", //排序方式 sidePagination: "server", //分頁方式：client客戶端分頁，server服務端分頁 pageNumber: 1, //初始化加載第一頁，默認第一頁 pageSize: 4, //每頁的記錄行數（*） pageList: [4, 20, 25, 30], //可供選擇的每頁的行數（*） //search: true, //是否顯示表格搜索，此搜索是客戶端搜索，不會進服務端，所以，個人感覺意義不大 strictSearch: true, //showPaginationSwitch: true, showExport: true, exportDataType: "all", showExport: true, //是否顯示導出按鈕 buttonsAlign:"right", //按鈕位置 exportTypes:[ 'csv', 'txt', 'excel', 'pdf'], //導出文件類型 Icons:'glyphicon-export', showColumns: true, //是否顯示所有的列 showToggle:true, //是否顯示詳細視圖和列表視圖的切換按鈕 showExportAll:true, //是否顯示全部導出按鈕 showRefresh: false, //是否顯示刷新按鈕 minimumCountColumns: 1, //最少允許的列數 clickToSelect: true, //是否啟用點擊選中行 cardView: false, //是否顯示詳細視圖 detailView: false, //是否顯示父子表 showHeader: true, onEditableSave: function (field, row, oldValue, $el) { $.ajax({ success: function (data, status) { if (status == "success") { alert("編輯成功"); } }, error: function () { alert("Error"); }, complete: function () { } }); }, columns: [ { title: '編號',//標題 formatter: function (value, row, index) { return $("tb_departments").bootstrapTable("getIndex"); } }, { align: "left",//水平居中 halign: "left",//垂直居中 field: "vehplate", title: "車牌號碼", editable: { type: 'text', title: "車牌號碼", noeditFormatter: function (value,row,index) { var result={filed:"vehplate",value:value}; return result; }, validate: function (value) { if ($.trim(value) == '') { return '車牌號碼不能為空!'; } } } },{ align: "left", halign: "left", field: "price", sortable:true, title: "原值(萬元)", editable: { type: 'text', title: "原值(萬元)", noeditFormatter: function (value,row,index) { var result={filed:"price",value:value,class:"badge bg-green",style:"padding:5px 10px;"}; return result; } } }, { align: "left", halign: "left", field: "netvalue", sortable:true, title: "凈值(萬元)", editable: { type: 'text', title: "凈值(萬元)", noeditFormatter: function (value,row,index) { var result={filed:"netvalue",value:value,class:"badge bg-orange",style:"padding:5px 10px;"}; return result; } } }, { align: "left", halign: "left", field: "accumulatedmileage", sortable:true, title: "累計里程", editable: { type: 'text', title: "累計里程", noeditFormatter: function (value,row,index) { var result={filed:"accumulatedmileage",value:value}; return result; } } }, { align: "left", halign: "left", field: "accumulateddepreciation", sortable:true, title: "累計折舊(萬元)", editable: { type: 'text', title: "累計折舊(萬元)", noeditFormatter: function (value,row,index) { var result={filed:"accumulateddepreciation",value:value}; return result; } } }, { align: "left", halign: "left", field: "vehClass", title: "車型" }, { align: "left", halign: "left", field: "vehtype1Desc", title: "車類" }, { align: "left", halign: "left", field: "vehtype2Desc", //width: 100, title: "車類明細" } ], onPageChange:function(number, size) { //設置在分頁事件觸發時，傳遞分頁參數給后臺，重新加載數據 me.queryBaseParam.limit=size; me.queryBaseParam.start=number; me.ajaxGetData(); }, onSort: function (name, order) { //傳遞參數給后臺進行排序 me.queryBaseParam.sort=name; me.queryBaseParam.order=order; me.ajaxGetData(); } });最后的結果和client分頁的序號是一樣的。
總結
以上所述是小編給大家介紹的BootStrap Table實現server分頁序號連續顯示功能（當前頁從上一頁的結束序號開始），希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
