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的一些总结
Nov 03 Javascript
如何使用Javascript正则表达式来格式化XML内容
Jul 04 Javascript
jQuery中$.fn的用法示例介绍
Nov 05 Javascript
js实现文章文字大小字号功能完整实例
Nov 01 Javascript
jQuery检测返回值的数据类型
Jul 13 Javascript
原生js与jQuery实现简单的tab切换特效对比
Jul 30 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
Nov 06 Javascript
jQuery插件开发汇总
May 15 Javascript
jQuery解析返回的xml和json方法详解
Jan 05 Javascript
解决Extjs下拉框不显示的问题
Jun 21 Javascript
详解微信小程序的不同函数调用的几种方法
May 08 Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
May 22 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
php中$this->含义分析
2009/11/29 PHP
php通过分类列表产生分类树数组的方法
2015/04/20 PHP
WordPress特定文章对搜索引擎隐藏或只允许搜索引擎查看
2015/12/31 PHP
PHP面向对象程序设计之接口的继承定义与用法详解
2018/12/20 PHP
Javascript开发包大全整理
2006/12/22 Javascript
javascript实现详细时间提醒信息效果的方法
2015/03/11 Javascript
jquery基础知识第一讲之认识jquery
2016/03/17 Javascript
javascript数组遍历的方法实例分析
2016/09/13 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
2016/11/09 Javascript
浅谈键盘上回车按钮的js触发事件
2017/02/13 Javascript
node.js + socket.io 实现点对点随机匹配聊天
2017/06/30 Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
2017/08/15 Javascript
微信小程序表单验证功能完整实例
2017/12/01 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
2018/01/25 Javascript
JS中Promise函数then的奥秘探究
2018/07/30 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
2018/09/26 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
2020/11/04 Javascript
Python实现截屏的函数
2015/07/25 Python
从源码解析Python的Flask框架中request对象的用法
2016/06/02 Python
轻量级的Web框架Flask 中模块化应用的实现
2017/09/11 Python
分享给Python新手们的几道简单练习题
2017/09/21 Python
破解安装Pycharm的方法
2018/10/19 Python
Python 判断奇数偶数的方法
2018/12/20 Python
Python第三方库h5py_读取mat文件并显示值的方法
2019/02/08 Python
python之拟合的实现
2019/07/19 Python
python rsa实现数据加密和解密、签名加密和验签功能
2019/09/18 Python
小白教你PyCharm从下载到安装再到科学使用PyCharm2020最新激活码
2020/09/25 Python
jupyter 添加不同内核的操作
2021/02/06 Python
节能环保口号
2014/06/12 职场文书
2014年司机工作总结
2014/11/21 职场文书
解约证明模板
2015/06/19 职场文书
2015年政治教研组工作总结
2015/07/22 职场文书
让人瞬间清醒的句子,句句经典,字字如金
2019/07/08 职场文书
导游词之河姆渡遗址博物馆
2019/10/10 职场文书
JS 基本概念详细介绍
2021/10/16 Javascript
SpringBoot详解执行过程
2022/07/15 Java/Android