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小技巧--自动隐藏红叉叉
Aug 13 Javascript
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
Oct 31 Javascript
如何让div span等元素能响应键盘事件操作指南
Nov 13 Javascript
jQuery的$.proxy()应用示例介绍
Apr 03 Javascript
js上传图片及预览功能实例分析
Apr 24 Javascript
javascript实现全角半角检测的方法
Jul 23 Javascript
jQuery zclip插件实现跨浏览器复制功能
Nov 02 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
Sep 08 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
Aug 09 Javascript
菊花转动的jquery加载动画效果
Aug 19 jQuery
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
May 06 Javascript
实例讲解JavaScript 计时事件
Jul 04 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 工厂模式使用方法
2010/05/18 PHP
PHP 反射(Reflection)使用实例
2015/05/12 PHP
PHP使用内置函数生成图片的方法详解
2016/05/09 PHP
PHP不使用内置函数实现字符串转整型的方法示例
2017/07/03 PHP
使用laravel根据用户类型来显示或隐藏字段
2019/10/17 PHP
ExtJS 2.0实用简明教程之应用ExtJS
2009/04/29 Javascript
拉动滚动条加载数据的jquery代码
2012/05/03 Javascript
js动态生成指定行数的表格
2013/07/11 Javascript
js中prototype用法详细介绍
2013/11/14 Javascript
js控制鼠标事件移动及移出效果显示
2014/10/19 Javascript
js中scrollTop()方法和scroll()方法用法示例
2016/10/03 Javascript
实现单层json按照key字母顺序排序的示例
2017/12/06 Javascript
微信小程序如何获取openid及用户信息
2018/01/26 Javascript
Vuex 快速入门(简单易懂)
2018/09/20 Javascript
vuex + keep-alive实现tab标签页面缓存功能
2019/10/17 Javascript
[46:09]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第三场
2014/05/26 DOTA
[01:19:46]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
python re模块的高级用法详解
2018/06/06 Python
python将txt文档每行内容循环插入数据库的方法
2018/12/28 Python
Python minidom模块用法示例【DOM写入和解析XML】
2019/03/25 Python
Python 取numpy数组的某几行某几列方法
2019/10/24 Python
详解Python修复遥感影像条带的两种方式
2020/02/23 Python
python解包概念及实例
2021/02/17 Python
原生canvas制作画图小工具的踩坑和爬坑
2020/06/09 HTML / CSS
美国高端婴童品牌:Hanna Andersson
2016/10/30 全球购物
美国儿童玩具、装扮和玩偶商店:Magic Cabin
2018/09/02 全球购物
联想马亚西亚官方网站:Lenovo Malaysia
2018/09/19 全球购物
毕业生自荐信格式
2014/03/07 职场文书
法院反腐倡廉心得体会
2014/09/09 职场文书
合法的离婚协议书范本
2014/10/23 职场文书
冬季作息时间调整通知
2015/04/24 职场文书
《观潮》教学反思
2016/02/17 职场文书
Python中常见的反爬机制及其破解方法总结
2021/06/10 Python
Vue+Flask实现图片传输功能
2022/04/01 Vue.js
Go语言安装并操作redis的go-redis库
2022/04/14 Golang
Java 轮询锁使用时遇到问题
2022/05/11 Java/Android