使用bootstrap-table进行表格展示时,总觉得不显示行号有点别扭,于是网上找办法。看到下面的文章:
bootstrap table 行号 显示行号 添加行号 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分页的情况下,也会连续的显示行号。当然获取上面提到的另外两个变量应该也可以获取。