layui数据表格添加序号的两种实现方式

当前页独立序号实现

第一种需求是仅在当前页面显示序号。

首先，在表格列配置中为对应列添加templet属性。

,cols: [[
 {field:'tourPlayerId', width:80, title: 'ID1', sort: true,fixed: 'left',}
 ,{field:'zizeng', width:80, title: '排名',fixed: 'left',templet:'#zizeng'}

其次，在HTML模板中定义一个脚本块，用于渲染序号。

<script type="text/html" id="zizeng">
 {{d.LAY_TABLE_INDEX+1}}
</script>

采用这种方式时，翻页后序号会重置，即下一页的序号从1重新开始，不会延续上一页的计数。

全局分页连续序号实现

第二种需求是实现包含分页在内的全局连续序号。

需要在列配置中设置type属性。

type参数用于定义列类型，可选值包括normal（常规列，默认无需设置）、checkbox（复选框列）、space（空列）以及numbers（序号列）。需要注意的是，numbers类型是layui版本2.2.0新增的功能。对于低于该版本的旧版layui，若需实现类似效果，复选框列需使用checkbox: true，空列需使用space: true。

因此，在支持该功能的版本中，只需将列的type设置为'numbers'即可实现全局序号功能。

具体效果如下图所示。

以上介绍了layui数据表格添加序号的两种常用方法，供开发者参考。