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 相关文章推荐
jQuery中jqGrid分页实现代码
Nov 04 Javascript
浅析JQuery获取和设置Select选项的常用方法总结
Jul 04 Javascript
jQuery使用之处理页面元素用法实例
Jan 19 Javascript
详谈jQuery.load()和Jsp的include的区别
Apr 12 jQuery
AngularJS实现页面跳转后自动弹出对话框实例代码
Aug 02 Javascript
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
vue 组件高级用法实例详解
Apr 11 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
Jul 13 Javascript
JavaScript命名空间模式实例详解
Jun 20 Javascript
layui之table checkbox初始化时选中对应选项的方法
Sep 02 Javascript
JS使用H5实现图片预览功能
Sep 30 Javascript
详解vite+ts快速搭建vue3项目以及介绍相关特性
Feb 25 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
PHP处理Oracle的CLOB实例
2014/11/03 PHP
js 操作符实例代码
2009/10/24 Javascript
Javascript动态绑定事件的简单实现代码
2010/12/25 Javascript
jQuery最佳实践完整篇
2011/08/20 Javascript
jQuery 选择器项目实例分析及实现代码
2012/12/28 Javascript
jquery实现商品拖动选择效果代码(自写)
2013/05/28 Javascript
Android中的jQuery:AQuery简介
2014/05/06 Javascript
在myeclipse中如何加入jquery代码提示功能
2014/06/03 Javascript
基于javascript的JSON格式页面展示美化方法
2014/07/02 Javascript
JS实现清除指定cookies的方法
2014/09/20 Javascript
推荐9款炫酷的基于jquery的页面特效
2014/12/07 Javascript
理解javascript闭包
2015/12/15 Javascript
Vue.js创建Calendar日历效果
2016/11/03 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
2017/01/23 Javascript
js监听input输入框值的实时变化实例
2017/01/26 Javascript
利用CDN加速react webpack打包后的文件详解
2018/02/22 Javascript
JavaScript引用类型Function实例详解
2018/08/09 Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
2018/08/22 Javascript
深入剖析JavaScript instanceof 运算符
2019/06/14 Javascript
Vue+Node实现的商城用户管理功能示例
2019/12/23 Javascript
jQuery实现的移动端图片缩放功能组件示例
2020/05/01 jQuery
学习 Vue.js 遇到的那些坑
2021/02/02 Vue.js
[00:59]DOTA2背景故事第二期之四大基本法则
2020/07/07 DOTA
Python反转序列的方法实例分析
2018/03/21 Python
python使用opencv驱动摄像头的方法
2018/08/03 Python
Python装饰器使用你可能不知道的几种姿势
2019/10/25 Python
pytorch加载自定义网络权重的实现
2020/01/07 Python
浅谈tensorflow使用张量时的一些注意点tf.concat,tf.reshape,tf.stack
2020/06/23 Python
python中取绝对值简单方法总结
2020/07/24 Python
详解Python之Scrapy爬虫教程NBA球员数据存放到Mysql数据库
2021/01/24 Python
佳能英国官方网站:Canon UK
2017/08/08 全球购物
FOREO斐珞尔官方旗舰店:LUNA露娜洁面仪
2018/03/11 全球购物
Hush Puppies澳大利亚官网:舒适的男女休闲和正装鞋
2019/08/24 全球购物
师范应届生教师求职信
2013/11/05 职场文书
职工擅自离岗检讨书
2014/09/23 职场文书
加强党性修养心得体会
2016/01/21 职场文书