layui 给数据表格加序号的方法


Posted in Javascript onAugust 20, 2018

1,第一种需求,只给当前页加序号

(1),给你的数据加上 templet属性

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

(2),在table的下面加上:

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

这样的话 下一页里面的排序不会连着上一页的,只会重新从1开始排序

layui 给数据表格加序号的方法

2,第二种方法,包括分页的数据也加上序号

加上type属性,

layui 给数据表格加序号的方法

设定列类型。可选值有:normal(常规列,无需设定)、checkbox(复选框列)、space(空列)、numbers(序号列)。注意:该参数为 layui 2.2.0 新增。而如果是之前的版本,复选框列采用 checkbox: true、空列采用 space: true

所以你这里只需要用到type:'numbers'就可以了,

效果如下:

layui 给数据表格加序号的方法

以上这篇layui 给数据表格加序号的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
建议大家看下JavaScript重要知识更新
Jul 08 Javascript
javascript写的一个链表实现代码
Oct 25 Javascript
Javascript 面向对象特性
Dec 28 Javascript
19个很有用的 JavaScript库推荐
Jun 27 Javascript
js 动态修改css文件的方法
Aug 05 Javascript
jQuery实现新消息在网页标题闪烁提示
Jun 23 Javascript
使用JS代码实现点击按钮下载文件
Nov 12 Javascript
vue-resourse将json数据输出实例
Mar 08 Javascript
详解微信小程序开发(项目从零开始)
Jun 06 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
Nov 07 Javascript
vue实现简单瀑布流布局
May 28 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
May 20 Javascript
解决LayUI表单获取不到data的问题
Aug 20 #Javascript
Layui数据表格之获取表格中所有的数据方法
Aug 20 #Javascript
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
Aug 19 #Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
Aug 19 #Javascript
Vue常用指令详解分析
Aug 19 #Javascript
使用layui 渲染table数据表格的实例代码
Aug 19 #Javascript
layui获取选中行数据的实例讲解
Aug 19 #Javascript
You might like
使用swoole扩展php websocket示例
2014/02/13 PHP
用PHP解决的一个栈的面试题
2014/07/02 PHP
php微信公众号开发之答题连闯三关
2018/10/20 PHP
PHP小程序支付功能完整版【基于thinkPHP】
2019/03/26 PHP
PHP实现基于状态的责任链审批模式详解
2019/05/31 PHP
修改发贴的编辑功能
2007/03/07 Javascript
用Greasemonkey 脚本收藏网站会员信息到本地
2009/10/26 Javascript
基于JavaScript 声明全局变量的三种方式详解
2013/05/07 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
2014/08/04 Javascript
BootStrap树状图显示功能
2016/11/24 Javascript
AngularJS Toaster使用详解
2017/02/24 Javascript
H5实现中奖记录逐行滚动切换效果
2017/03/13 Javascript
十大热门的JavaScript框架和库
2017/03/21 Javascript
自定义vue全局组件use使用、vuex的使用详解
2017/06/14 Javascript
javaScript动态添加Li元素的实例
2018/02/24 Javascript
微信小程序实现多选删除列表数据功能示例
2019/01/15 Javascript
vue实现微信分享链接添加动态参数的方法
2019/04/29 Javascript
Node.js 实现远程桌面监控的方法步骤
2019/07/02 Javascript
Layui tree 下拉菜单树的实例代码
2019/09/21 Javascript
JavaScript实现PC端四格密码输入框功能
2020/02/19 Javascript
python抓取网页内容示例分享
2014/02/24 Python
python遍历类中所有成员的方法
2015/03/18 Python
python线程池(threadpool)模块使用笔记详解
2017/11/17 Python
详解Python3除法之真除法、截断除法和下取整对比
2019/05/23 Python
python实现拼图小游戏
2020/02/22 Python
使用OpenCV去除面积较小的连通域
2020/07/05 Python
python实现录音功能(可随时停止录音)
2020/10/26 Python
实例讲解使用SVG制作loading加载动画的方法
2016/04/05 HTML / CSS
S’well Bottle保温杯官网:绝缘不锈钢水瓶
2018/05/09 全球购物
当文件系统受到破坏时,如何检查和修复系统?
2012/03/09 面试题
医药营销专业个人自荐信
2013/09/29 职场文书
高校优秀辅导员事迹材料
2014/05/07 职场文书
师范毕业生求职信
2014/07/11 职场文书
学生会个人总结范文
2015/02/15 职场文书
SQL SERVER中常用日期函数的具体使用
2021/04/08 SQL Server
使用jpa之动态插入与修改(重写save)
2021/11/23 Java/Android