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 相关文章推荐
如何实现iframe(嵌入式帧)的自适应高度
Jul 26 Javascript
css图片自适应大小
Nov 28 Javascript
JS定时刷新页面及跳转页面的方法
Jul 04 Javascript
jquery使用animate方法实现控制元素移动
Mar 27 Javascript
EasyUI创建对话框的两种方式
Aug 23 Javascript
jQuery Validate验证框架详解(推荐)
Dec 17 Javascript
浅谈angularJS的$watch失效问题的解决方案
Aug 11 Javascript
微信小程序实现验证码获取倒计时效果
Feb 08 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
Aug 31 Javascript
微信小程序带动画弹窗组件使用方法详解
Nov 27 Javascript
深入理解vue-class-component源码阅读
Feb 18 Javascript
vue实现广告栏上下滚动效果
Nov 26 Vue.js
解决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
阿拉伯的咖啡与水烟
2021/03/03 咖啡文化
php快速url重写 更新版[需php 5.30以上]
2010/04/20 PHP
PHP中删除变量时unset()和null的区别分析
2011/01/27 PHP
9个经典的PHP代码片段分享
2014/12/18 PHP
从刷票了解获得客户端IP的方法
2015/09/21 PHP
javaScript - 如何引入js代码
2021/03/09 Javascript
Open and Print a Word Document
2007/06/15 Javascript
基于jquery的button默认enter事件(回车事件)。
2011/05/18 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
2013/07/15 Javascript
js Array操作的最简短最容易理解方法
2013/12/09 Javascript
Jquery修改页面标题title其它JS失效的解决方法
2014/10/31 Javascript
举例简介AngularJS的内部语言环境
2015/06/17 Javascript
贴近用户体验的Jquery日期、时间选择插件
2015/08/19 Javascript
jQuery点击导航栏选中更换样式的实现代码
2017/01/23 Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
2017/03/04 Javascript
jQuery Validate 校验多个相同name的方法
2017/05/18 jQuery
使用vue构建移动应用实战代码
2017/08/02 Javascript
开发一个Parcel-vue脚手架工具(详细步骤)
2018/09/22 Javascript
JavaScript this关键字的深入详解
2021/01/14 Javascript
python按照多个字符对字符串进行分割的方法
2015/03/17 Python
python 运用Django 开发后台接口的实例
2018/12/11 Python
使用NumPy读取MNIST数据的实现代码示例
2019/11/20 Python
python生成xml时规定dtd实例方法
2020/09/21 Python
巴西图书和电子产品购物网站:Saraiva
2017/06/07 全球购物
MyBag中文网:英国著名的时尚包袋电商零售网站
2020/07/31 全球购物
初入社会应届生求职信
2013/11/18 职场文书
大学生个人事迹材料
2014/01/21 职场文书
不打扫卫生检讨书
2014/02/12 职场文书
学习保证书范文
2014/04/30 职场文书
2014年祖国生日寄语
2014/09/19 职场文书
2014年青年教师工作总结
2014/12/17 职场文书
大学生求职自荐信范文
2015/03/04 职场文书
房地产财务经理岗位职责
2015/04/08 职场文书
《梅花魂》教学反思
2016/02/18 职场文书
PHP控制循环操作的时间
2021/04/01 PHP
SpringBoot整合Minio文件存储
2022/04/03 Java/Android