bootstrap-table 顯示行號,分頁有效
阿新 • • 發佈:2019-01-31
使用bootstrap-table進行表格展示時,總覺得不顯示行號有點彆扭,於是網上找辦法。看到下面的文章:
首先感謝原作者。
思想:藉助bootstrap-table 本身的index屬性, 巧妙的的通過formatter 實現
{
field: 'Number',
title: 'Number',
formatter: function (value, row, index) {
return index+1;
}
}
但是翻頁後,行號還是會從1開始,沒有連線上一頁的。
翻看bootstrap-table的原始碼,可以看到它的配置項都放在一個叫做options的物件裡,包括頁碼pageNumber和頁面大小pageSize,同樣也有pageFrom和pageTo兩個變數,表示當前頁起始和結束的行號索引。
試試修改原始碼,增加獲取pageNumber和pageSize引數的方法。我用的版本是1.6.0,修改如下:
1)增加getPage方法,獲取當前設定的頁碼,和每頁行數:
BootstrapTable.prototype.getPage = function (params) {
return {pageSize: this.options.pageSize, pageNumber: this.options.pageNumber};
};
2)修改allowedMethods物件,增加getPage:
var allowedMethods = [ 'getOptions', 'getSelections', 'getData', 'load', 'append', 'prepend', 'remove', 'insertRow', 'updateRow', 'showRow', 'hideRow', 'mergeCells', 'checkAll', 'uncheckAll', 'check', 'uncheck', 'checkBy', 'uncheckBy', 'refresh', 'getPage', 'resetView', 'destroy', 'showLoading', 'hideLoading', 'showColumn', 'hideColumn', 'filterBy', 'scrollTo', 'selectPage', 'prevPage', 'nextPage', 'togglePagination', 'toggleView' ];
3)呼叫的地方通過getPage方法:
columns : [{
field : 'Number',
title : '行號',
formatter : function(value, row, index) {
//return index + 1;
var page = $table.bootstrapTable("getPage");
return page.pageSize * (page.pageNumber - 1) + index + 1;
}
},//......
這樣的話,在bootstrap-table分頁的情況下,也會連續的顯示行號。當然獲取上面提到的另外兩個變數應該也可以獲取。