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 23 Javascript
jQuery遮罩层效果实例分析
Jan 14 Javascript
jQuery+正则+文本框只能输入数字的实现方法
Oct 07 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
Oct 10 Javascript
如何实现json数据可视化详解
Nov 24 Javascript
详解Vuex中mapState的具体用法
Sep 28 Javascript
JavaScript中创建原子的方法总结
Aug 26 Javascript
微信小程序实现笑脸评分功能
Nov 03 Javascript
vue发送websocket请求和http post请求的实例代码
Jul 11 Javascript
vue-mugen-scroll组件实现pc端滚动刷新
Aug 16 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
Aug 22 Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
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中用PDO查询Mysql来避免SQL注入风险的方法
2013/04/25 PHP
如何使用PHP计算上一个月的今天
2013/05/23 PHP
对laravel的csrf 防御机制详解,及form中csrf_token()的存在介绍
2019/10/24 PHP
常用的javascript function代码
2008/05/23 Javascript
javascript 面向对象编程基础:继承
2009/08/21 Javascript
jquery multiSelect 多选下拉框
2010/07/09 Javascript
Javascript浅谈之this
2013/12/17 Javascript
jQuery 获取兄弟元素的几种不错方法
2014/05/23 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
2014/11/17 Javascript
javascript实现切换td中的值
2014/12/05 Javascript
JavaScript基础函数整理汇总
2015/01/30 Javascript
jQuery基于图层模仿五星星评价功能的方法
2015/05/07 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
2015/11/02 Javascript
基于JavaScript实现动态创建表格和增加表格行数
2015/12/20 Javascript
js中json处理总结之JSON.parse
2016/10/14 Javascript
webpack多入口多出口的实现方法
2018/08/17 Javascript
Vue数字输入框组件示例代码详解
2020/01/15 Javascript
javascript History对象原理解析
2020/02/17 Javascript
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
2020/04/30 jQuery
举例讲解Django中数据模型访问外键值的方法
2015/07/21 Python
Python内存读写操作示例
2018/07/18 Python
Python日志模块logging基本用法分析
2018/08/23 Python
浅谈pytorch grad_fn以及权重梯度不更新的问题
2019/08/20 Python
详解python中的生成器、迭代器、闭包、装饰器
2019/08/22 Python
浅谈pycharm使用及设置方法
2019/09/09 Python
Python pandas库中的isnull()详解
2019/12/26 Python
Python 之 Json序列化嵌套类方式
2020/02/27 Python
浅谈Django前端后端值传递问题
2020/07/15 Python
探索欧洲最好的品牌:Bombinate
2019/06/14 全球购物
遇到的Mysql的面试题
2014/06/29 面试题
软件工程专业推荐信
2013/10/28 职场文书
教师一帮一活动总结
2014/07/08 职场文书
十八大宣传标语
2014/10/09 职场文书
党员转正介绍人意见
2015/06/03 职场文书
仰望星空观后感
2015/06/10 职场文书
创业计划书之网络外卖
2019/10/31 职场文书