bootstrap-table 显示行号,分页有效

使用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分页的情况下,也会连续的显示行号。当然获取上面提到的另外两个变量应该也可以获取。


  • 2
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

哪知道

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值