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 相关文章推荐
javascript图像处理—仿射变换深度理解
Jan 16 Javascript
浅析jQuery对select操作小结(遍历option,操作option)
Jul 04 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
Aug 13 Javascript
jquery对象和DOM对象的任意相互转换
Feb 21 Javascript
javascript事件绑定学习要点
Mar 09 Javascript
JavaScript暂停和继续定时器的实现方法
Jul 18 Javascript
关于Jquery中的事件绑定总结
Oct 26 Javascript
薪资那么高的Web前端必看书单
Oct 13 Javascript
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
vue中如何实现pdf文件预览的方法
Jul 12 Javascript
JS实现简易留言板特效
Dec 23 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
Jun 01 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
php5编程中的异常处理详细方法介绍
2008/07/29 PHP
PHP Pear 安装及使用
2009/03/19 PHP
一步一步学习PHP(4) php 函数 补充2
2010/02/15 PHP
PHP var_dump遍历对象属性的函数与应用代码
2010/06/04 PHP
php设计模式 State (状态模式)
2011/06/26 PHP
php上传图片到指定位置路径保存到数据库的具体实现
2013/12/30 PHP
浅谈PHP封装CURL
2019/03/06 PHP
JS版网站风格切换实例代码
2008/10/06 Javascript
在IE6下发生Internet Explorer cannot open the Internet site错误
2010/06/21 Javascript
Highcharts 非常实用的Javascript统计图demo示例
2013/07/03 Javascript
一个JavaScript递归实现反转数组字符串的实例
2014/10/14 Javascript
javascript中Array数组的迭代方法实例分析
2015/02/04 Javascript
常用的Javascript数据验证插件
2015/08/04 Javascript
微信小程序 传值取值的几种方法总结
2017/01/16 Javascript
浅谈react 同构之样式直出
2017/11/07 Javascript
python字典序问题实例
2014/09/26 Python
Python操作SQLite数据库的方法详解
2017/06/16 Python
python中Switch/Case实现的示例代码
2017/11/09 Python
python模块之paramiko实例代码
2018/01/31 Python
tensorflow学习笔记之mnist的卷积神经网络实例
2018/04/15 Python
python3+dlib实现人脸识别和情绪分析
2018/04/21 Python
django orm 通过related_name反向查询的方法
2018/12/15 Python
如何使用Python标准库进行性能测试
2019/06/25 Python
学习和使用python的13个理由
2019/07/30 Python
python生成器/yield协程/gevent写简单的图片下载器功能示例
2019/10/28 Python
Python classmethod装饰器原理及用法解析
2020/10/17 Python
意大利巧克力店:Chocolate Shop
2019/07/24 全球购物
博柏利美国官方网站:Burberry美国
2020/11/19 全球购物
村官学习十八大感想
2014/01/15 职场文书
2014年学习雷锋活动总结
2014/03/01 职场文书
服务承诺书格式
2014/05/21 职场文书
安全资料员岗位职责范本
2014/06/28 职场文书
小区的门卫岗位职责
2014/10/01 职场文书
篮球比赛通讯稿
2015/07/18 职场文书
react中的DOM操作实现
2021/06/30 Javascript
浅谈Redis变慢的原因及排查方法
2022/06/21 Redis