bootstrap table實現server分頁序號連續（當前頁從上一頁的結束序號開始）
阿新 • • 發佈：2019-02-12
前言
- 在使用bootstrap table的時候難免會用到分頁，分頁它提供了兩種方式：client客戶端分頁、server服務端分頁兩種方式。
- 在專案中一般是不用client分頁的，一般表格資料量大，用client分頁會導致快取爆炸，所以我們選擇server分頁。
- 存在即合理，client也是可以用的（資料量特別少的時候），相對於server方式，它的分頁序號是自動連續的。而server方式分頁的序號就不連續的了（每一頁都是從1開始，而不是從上一頁的結束序號開始），本文就著重解決這個問題。
原始分頁結果
- client分頁，使用bootstrap table的formatter中的index索引值可以使得序號是連續的，上圖：
這是第1頁的序號，為1-4。
這是第2頁的序號，為5-8。
- server分頁，由於缺乏當前頁的位置pageNumber和每頁的大小pageSize,所以無法確定索引值，用formatter返回index就是隻有當前頁的索引。
這是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分頁的序號是一樣的。有任何問題歡迎留言。
注：本文為原創，轉載請註明出處。