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 相关文章推荐
常用js脚本
Dec 03 Javascript
Javascript判断图片尺寸大小实例分析
Jun 16 Javascript
jquery delay()介绍及使用指南
Sep 02 Javascript
jQuery中add()方法用法实例
Jan 08 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
Apr 06 Javascript
JS实现太极旋转思路分析
Dec 09 Javascript
原生js实现水平方向无缝滚动
Jan 10 Javascript
利用javascript如何随机生成一定位数的密码
Sep 22 Javascript
JavaScript屏蔽Backspace键的实现代码
Nov 02 Javascript
解决vue组件props传值对象获取不到的问题
Jun 06 Javascript
vue组件 keep-alive 和 transition 使用详解
Oct 11 Javascript
Vue切换Tab动态渲染组件的操作
Sep 21 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
PHP字符串的递增和递减示例介绍
2014/02/11 PHP
详解php几行代码实现CSV格式文件输出
2017/07/01 PHP
javascript div 弹出可拖动窗口
2009/02/26 Javascript
基于jQuery的360图片展示实现代码
2012/06/14 Javascript
jQuery中校验时间格式的正则表达式小结
2013/09/22 Javascript
用jquery中插件dialog实现弹框效果实例代码
2013/11/15 Javascript
实现js保留小数点后N位的代码
2014/11/13 Javascript
js实现缓冲运动效果的方法
2015/04/10 Javascript
jquery中map函数遍历数组用法实例
2015/05/18 Javascript
js密码强度校验
2015/11/10 Javascript
jQuery+json实现的简易Ajax调用实例
2015/12/14 Javascript
很实用的js选项卡切换效果
2016/08/12 Javascript
用headjs来管理和加载js 提高网站加载速度
2016/11/29 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
2017/06/14 Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
2018/12/03 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
2019/09/25 Javascript
浅谈js中的attributes和Attribute的用法与区别
2020/07/16 Javascript
微信小程序 接入腾讯地图的两种写法
2021/01/12 Javascript
[42:20]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python中实现参数类型检查的简单方法
2015/04/21 Python
Python实现批量转换文件编码的方法
2015/07/28 Python
详解Python中open()函数指定文件打开方式的用法
2016/06/04 Python
Python 如何访问外围作用域中的变量
2016/09/11 Python
python编写Logistic逻辑回归
2020/12/30 Python
Python之多线程爬虫抓取网页图片的示例代码
2018/01/10 Python
python实现百万答题自动百度搜索答案
2018/01/16 Python
PyQt Qt Designer工具的布局管理详解
2019/08/07 Python
python pyecharts 实现一个文件绘制多张图
2020/05/13 Python
css3.0 图形构成实例练习二
2013/03/19 HTML / CSS
西班牙最大的在线滑板和街头服饰商店:Fillow.net
2019/04/15 全球购物
生产车间主管岗位职责
2013/12/28 职场文书
酒店秘书求职信范文
2014/02/17 职场文书
优秀学生评语大全
2014/04/25 职场文书
就业意向书
2014/07/29 职场文书
关于Redis的主从复制及哨兵问题
2022/06/16 Redis
Win11 25163.1010更新补丁KB5016904推送,测试服务验证管道(附更新修复汇总)
2022/07/23 数码科技