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 相关文章推荐
延时重复执行函数 lLoopRun.js
May 08 Javascript
Pro JavaScript Techniques学习笔记
Dec 28 Javascript
简单的两种Extjs formpanel加载数据的方式
Nov 09 Javascript
Node.js实现简单聊天服务器
Jun 20 Javascript
javascript中定义类的方法详解
Feb 10 Javascript
在JavaScript中正确引用bind方法的应用
May 11 Javascript
浅谈javascript中的闭包
May 13 Javascript
JavaScript实现的SHA-1加密算法完整实例
Feb 02 Javascript
微信小程序 video组件详解
Oct 25 Javascript
jQuery自定义插件详解及实例代码
Dec 29 Javascript
浅谈webpack下的AOP式无侵入注入
Nov 12 Javascript
如何在js代码中消灭for循环实例详解
Jul 29 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 遍历显示文件夹下所有目录、所有文件的函数,没有分页的代码
2008/11/14 PHP
用来解析.htpasswd文件的PHP类
2012/09/05 PHP
php计算整个目录大小的方法
2015/06/19 PHP
基于thinkPHP框架实现留言板的方法
2016/10/17 PHP
Jquery跨域获得Json时invalid label错误的解决办法
2011/01/11 Javascript
jQuery中读取json文件示例代码
2013/05/10 Javascript
node.js中的console.dir方法使用说明
2014/12/10 Javascript
jQuery中append()方法用法实例
2015/01/08 Javascript
js简单实现标签云效果实例
2015/08/06 Javascript
跟我学习javascript的call(),apply(),bind()与回调
2015/11/16 Javascript
跟我学习javascript的异步脚本加载
2015/11/20 Javascript
Javascript中的arguments对象
2016/06/20 Javascript
js实现下一页页码效果
2017/03/07 Javascript
详解前端路由实现与react-router使用姿势
2017/08/07 Javascript
浅谈webpack下的AOP式无侵入注入
2017/11/12 Javascript
Vue组件化开发思考
2018/02/02 Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
2020/03/05 Javascript
Vue组件通信$attrs、$listeners实现原理解析
2020/09/03 Javascript
Python中DJANGO简单测试实例
2015/05/11 Python
python通过opencv实现批量剪切图片
2017/11/13 Python
Python装饰器用法示例小结
2018/02/11 Python
代码讲解Python对Windows服务进行监控
2018/02/11 Python
用python写扫雷游戏实例代码分享
2018/05/27 Python
对Python生成汉字字库文字,以及转换为文字图片的实例详解
2019/01/29 Python
基于jupyter代码无法在pycharm中运行的解决方法
2020/04/21 Python
python 获取字典键值对的实现
2020/11/12 Python
Python爬虫scrapy框架Cookie池(微博Cookie池)的使用
2021/01/13 Python
css3中flex布局宽度不生效的解决
2020/12/09 HTML / CSS
澳大利亚天然护肤品、化妆品和健康产品一站式商店:Nourished Life
2018/12/02 全球购物
十八届三中全会感言
2014/03/10 职场文书
机关门卫的岗位职责
2014/04/29 职场文书
小学兴趣小组活动总结
2014/07/07 职场文书
期末个人总结范文
2015/02/13 职场文书
廉洁自律心得体会2016
2016/01/13 职场文书
2019年暑期安全广播稿!
2019/07/03 职场文书
使用python生成大量数据写入es数据库并查询操作(2)
2022/09/23 Python