bootstrap-table给每行添加编号

在bootstrap-table中,通过利用table对象的pageNumber和pageSize属性,结合当前行号index,实现了为表格所有行添加统一的计数编号功能。此方法解决了常规index计数方式下每页重新计数的问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在使用bootstrap-table时,想给每行添加一个编号,sql语句已经写好,不想改,所以就在前端上动脑筋了。
首先想到的就是列属性中formatter的参数index,测试后发现index从0开始,只记录当前页的行号,下一页后从新计数,即每页都是从0到pageSize,无法实现自己想要的所有行统一计数,于是想到结合分页参数pageNumber和pageSize与当前行号index来实现。
那么,如何实现呢,问题的关键就在于获取table对象的pageNumber和pageSize,翻看文档,没有发现相关api,查看源码,发现有个方法‘getOptions’没有在作者提供的文档中出现,不过源码中已经写好了,于是尝试调用,再于是,问题解决了。
在bootstrap-table对象的columns属性中加入以下代码,就可以实现为表格所有行添加一个统一的计数编号了。
{
title: '编号',
align: 'center',
valign: 'bottom',
formatter:function(value,row,index){
var pageNumber = $('#btable').bootstrapTable('getOptions').pageNumber;
var pageSize = $('#btable').bootstrapTable('getOptions').pageSize;
return (pageNumber-1) * pageSize+index+1;
}
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值