layui数据表格增加序号列（第二页从1开始 or 接上一页序号开始）

layui数据表格增加序号列：

一.分页模式下第二页从1开始

1、在table.render()方法中，加

{title: '序号', align: "center",templet: '#indexTpl'},

示例：

table.render({elem: '#goods',url: '/index',parseData: function (res) { //res 即为原始返回的数据return {"code": res.code, //解析接口状态"msg": res.msg, //解析提示文本"count": res.data.count, //解析数据长度"data": res.data.list //解析数据列表};}, page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'],//自定义分页布局limits: [10, 20, 50, 100],limit: 10,},where: {messageOrNotice: 1}, skin: 'line' //line（行边框风格）row （列边框风格）nob （无边框风格）, cols: [[{title: '序号', align: "center", templet: '#indexTpl'},{field: 'title', title: '标题', align: "center"},{field: 'content', title: '消息内容', align: "center", toolbar: '#barDemo1'},{field: 'sendTime', title: '发送时间', align: "center", templet:function (d) {return formatDate(d.sendTime);}},]],});

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

2.利用thymeleaf

通过后端传过来的list循环取得数据

th:text="${orderStat.count}"

index:当前迭代对象的index（从0开始计算）
count: 当前迭代对象的index(从1开始计算)

示例：

     <div class=" order"><div class="orderTop"><ul class="clear"><li>序号</li><li>、、、</li></ul></div><div th:each="order,orderStat : ${list}"><div class="orderDetail"><ul class="clear"><li><span th:text="${orderStat.count}"></span></li><li class="w60">、、、、、、、</li></ul></div></div></div>

二、第二页的序号接着第一页的开始

1.在table.render()方法中，加

{title: '序号', align: "center",type:"numbers"},

示例：

table.render({elem: '#goods',url: '/index',parseData: function (res) { //res 即为原始返回的数据return {"code": res.code, //解析接口状态"msg": res.msg, //解析提示文本"count": res.data.count, //解析数据长度"data": res.data.list //解析数据列表};}, page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'],//自定义分页布局limits: [10, 20, 50, 100],limit: 10,},where: {messageOrNotice: 1}, skin: 'line' //line（行边框风格）row （列边框风格）nob （无边框风格）, cols: [[{title: '序号', align: "center", type: "numbers"},{field: 'title', title: '标题', align: "center"},{field: 'content', title: '消息内容', align: "center", toolbar: '#barDemo1'},{field: 'sendTime', title: '发送时间', align: "center", templet:function (d) {return formatDate(d.sendTime);}},]],});

2.利用thymeleaf

通过后端传过来的list，循环取得数据

th:text="${(page-1) * size + orderStat.count}"

（当前页-1）*每页多少条 + 当前迭代对象的index（从1开始）
比如：每页10条，第二页第二条数据应该是12.
（2-1）*10+2 = 12

示例：

<div class=" order"><div class="orderTop"><ul class="clear"><li>序号</li><li>、、、</li></ul></div><div th:each="order,orderStat : ${list}"><div class="orderDetail"><ul class="clear"><li><span th:text="${(page-1) * size + orderStat.count}"></span></li><li class="w60">、、、、、、、</li></ul></div></div>
</div>
<input hidden id="pageCount" th:value="${count}">
<input hidden id="pageSize" th:value="${size}">
<input hidden id="pageCurr" th:value="${page}">

layui数据表格增加序号列（第二页从1开始 or 接上一页序号开始）相关推荐

解决layui数据表格table固定列行高不一致的情况
在回调函数done中添加如下代码: //动态监听表头高度变化,冻结行跟着改变高度$(".layui-table-header tr").resize(function () {$( ...
解决Layui数据表格无数据最后列被顶出去的问题
解决Layui数据表格无数据最后列被顶出去的问题参考文章: (1)解决Layui数据表格无数据最后列被顶出去的问题 (2)https://www.cnblogs.com/Caoxdong/p/963 ...
layui 鼠标移入变为小手_如何在 LayUI 数据表格的列元素上，鼠标悬浮，显示所有文字内容（修改源码）...
文中使用的LayUI版本:layui-v2.5.5 问题描述: 最近参与开发了问题分析: 要实现鼠标悬浮显示所有内容,一般采用的都是给对应元素上添加 title 属性,这样当鼠标悬浮在对应列的时候, ...
layui数据表格（一：基础篇，数据展示、分页组件、表格内嵌表单和图片）
表格展示神器之一:layui表格前言:在写后台管理系统中使用最多的就是表格数据展示了,使用表格组件能提高大量的开发效率,目前主流的数据表格组件有bootstrap table.layui table ...
Layui数据表格的引用
对于一些编程插件的引用,相信大多数的编程人员都不会感觉到陌生,因为在对程序开发和项目开发的过程中往往都会需要引用到插件,那么至于插件呢,也有很多种,比如: bootstrap jquery layui ...
php数据表格的重载,layui数据表格实现重载数据表格功能(搜索功能）
layui数据表格实现重载数据表格功能,以搜索功能为例加载数据表格实现搜索功能和数据表格重载全部代码加载数据表格按照layui官方文档示例 HTML部分 JavaScript部分 var t ...
php分页显示数据表格显示,php+layui数据表格实现数据分页渲染代码
一.html 二.js 说明:需要引入layui中的table和laytpl模板引擎,laytpl可以自定义事件及自定义数据字段等查看详情 {{# if (d.hotcake === '超级爆款') ...
layui数据表格分页无法正常显示
layui数据表格分页无法正常显示应该先利用layui table中的parseData方法手动将数据切片分页,代码如下,要点是parseData: function(res){}中的方法,对从ur ...
Thinkphp+layui数据表格实现表格分页
项目场景:Thinkphp+layui数据表格实现表格分页提示:thinkphp+layui数据表格分页,需要服务器端配合.之前在百度上一通乱搜也没找到解决方案. 问题描述提示:这里描述项目中遇到 ...

layui数据表格增加序号列（第二页从1开始 or 接上一页序号开始）

layui数据表格增加序号列：

一.分页模式下第二页从1开始

1、在table.render()方法中，加

2.利用thymeleaf

二、第二页的序号接着第一页的开始

1.在table.render()方法中，加

2.利用thymeleaf

layui数据表格增加序号列（第二页从1开始 or 接上一页序号开始）相关推荐

最新文章

热门文章