jQuery插件dataTables添加序号列的方法


Posted in Javascript onJuly 06, 2016

官网方法实例:

$(document).ready(function() {
var t = $('#example').DataTable({
"columnDefs": [{
"searchable": false,
"orderable": false,
"targets": 0
}],
"order": [[1, 'asc']]
});
t.on('order.dt search.dt',
function() {
t.column(0, {
search: 'applied',
order: 'applied'
}).nodes().each(function(cell, i) {
cell.innerHTML = i + 1;
});
}).draw();
});

试了一下,然后发现会报draw方法找不到之类的,可能是因为版本问题,用的是1.12.10版本的。

所以又发现有热心网友分享一下方法,是可以的。

定义{"data": null,"targets": 0},一个空列,然后在dataTables中添加方法:

"fnDrawCallback": function(){
var api = this.api();

var startIndex= api.context[0]._iDisplayStart;//获取到本页开始的条数

api.column(0).nodes().each(function(cell, i) {


cell.innerHTML = startIndex + i + 1;

}); 
}

网址链接:http://datatables.club/example/api/counter_columns.html

以上所述是小编给大家介绍的jQuery插件dataTables添加序号列的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery 选择器部分整理
Oct 28 Javascript
重载toString实现JS HashMap分析
Mar 13 Javascript
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
Apr 10 Javascript
使用angularjs创建简单表格
Jan 21 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
Oct 07 Javascript
ES6概念 ymbol.for()方法
Dec 25 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
基于js中style.width与offsetWidth的区别(详解)
Nov 12 Javascript
微信小程序实现分享到朋友圈功能
Jul 19 Javascript
微信小程序与后台PHP交互的方法实例分析
Dec 10 Javascript
教你搭建按需加载的Vue组件库(小结)
Jul 29 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
Jan 26 Javascript
Spring MVC中Ajax实现二级联动的简单实例
Jul 06 #Javascript
js中window.open的参数及注意注意事项
Jul 06 #Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
Jul 06 #Javascript
jQuery 3.0十大新特性
Jul 06 #Javascript
Javascript 基础---Ajax入门必看
Jul 06 #Javascript
jQuery获取浏览器类型和版本号的方法
Jul 05 #Javascript
jQuery事件委托之Safari
Jul 05 #Javascript
You might like
《魔兽争霸3:重制版》翻车了?你想要的我们都没有
2019/11/07 魔兽争霸
PHP+MYSQL的文章管理系统(二)
2006/10/09 PHP
php结合mysql与mysqli扩展处理事务的方法
2016/06/29 PHP
ImageZoom 图片放大镜效果(多功能扩展篇)
2010/04/14 Javascript
jquery怎样实现ajax联动框(二)
2013/03/08 Javascript
3种不同方式的焦点图轮播特效分享
2013/10/30 Javascript
使用VS开发 Node.js指南
2015/01/06 Javascript
jQuery操作DOM之获取表单控件的值
2015/01/23 Javascript
javascript图片滑动效果实现
2021/01/28 Javascript
jQuery动态加载css文件实现方法
2016/06/15 Javascript
js实现日历的简单算法
2017/01/24 Javascript
vue.js 获取当前自定义属性值
2017/06/01 Javascript
Vue使用vue-cli创建项目
2017/09/01 Javascript
Vue多种方法实现表头和首列固定的示例代码
2018/02/02 Javascript
原生JS实现瀑布流插件
2018/02/06 Javascript
JavaScript学习笔记之图片库案例分析
2019/01/08 Javascript
JavaScript中的各种宽高属性的实现
2020/05/08 Javascript
Ant Design Pro 之 ProTable使用操作
2020/10/31 Javascript
[01:16:37]【全国守擂赛】第三周决赛 Dark Knight vs. 一个弱队
2020/05/04 DOTA
[01:03]PWL开团时刻DAY6——别打我
2020/11/05 DOTA
windows 10下安装搭建django1.10.3和Apache2.4的方法
2017/04/05 Python
利用Python实现网络测试的脚本分享
2017/05/26 Python
Python 通过打码平台实现验证码的实现
2019/05/13 Python
python3中类的继承以及self和super的区别详解
2019/06/26 Python
关于numpy数组轴的使用详解
2019/12/05 Python
HTML5里的placeholder属性使用实例和美化显示效果的方法
2014/04/23 HTML / CSS
美国体育用品在线:Modell’s Sporting Goods
2018/06/07 全球购物
俄罗斯便宜的在线服装商店:GroupPrice
2020/04/10 全球购物
期末考试动员演讲稿
2014/01/10 职场文书
党的群众路线教育实践活动心得体会(乡镇)
2014/11/03 职场文书
英文邀请函
2015/02/02 职场文书
研究生导师推荐信
2015/03/25 职场文书
上市公司财务总监岗位职责
2015/04/03 职场文书
初三英语教学反思
2016/02/15 职场文书
Python数据清洗工具之Numpy的基本操作
2021/04/22 Python
HTML基础详解(下)
2021/10/16 HTML / CSS