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 相关文章推荐
提高 DHTML 页面性能
Dec 25 Javascript
JS 控制CSS样式表
Aug 20 Javascript
jquery限制输入字数,并提示剩余字数实现代码
Dec 24 Javascript
js 左右悬浮对联广告代码示例
Dec 12 Javascript
javascript的变量、传值、传址、参数之间关系
Jul 26 Javascript
原生JS京东轮播图代码
Mar 22 Javascript
微信小程序 登录的简单实现
Apr 19 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
Dec 27 Javascript
vue实现微信获取用户信息的方法
Mar 21 Javascript
优雅的使用javascript递归画一棵结构树示例代码
Sep 22 Javascript
vue.js路由mode配置之去掉url上默认的#方法
Nov 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
雄兵连三大错觉:凯莎没了,凉冰阵亡了,华烨觉得自己又行了
2020/04/09 国漫
php中的比较运算符详解
2013/10/28 PHP
php中过滤非法字符的具体实现
2013/10/29 PHP
一个对于Array的简单扩展
2006/10/03 Javascript
JavaScript 编写匿名函数的几种方法
2010/02/21 Javascript
JQuery 技巧和窍门整理(8个)
2010/04/22 Javascript
在Windows上安装Node.js模块的方法
2011/09/25 Javascript
jQuery.extend 函数的详细用法
2012/06/27 Javascript
提高jQuery性能优化的技巧
2015/08/03 Javascript
javascript图片预加载完整实例
2015/12/10 Javascript
详解JS面向对象编程
2016/01/24 Javascript
jquery UI Datepicker时间控件的使用及问题解决
2016/04/28 Javascript
bootstrap读书笔记之CSS组件(上)
2016/10/17 Javascript
js实现九宫格拼图小游戏
2017/02/13 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
2017/09/20 jQuery
微信小程序实现的涂鸦功能示例【附源码下载】
2018/01/12 Javascript
理解Koa2中的async&await的用法
2018/02/05 Javascript
ES6基础之 Promise 对象用法实例详解
2019/08/22 Javascript
解决Vue打包上线之后部分CSS不生效的问题
2019/11/12 Javascript
vscode+gulp轻松开发小程序的完整步骤
2020/10/18 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
2020/11/11 Javascript
python实现将英文单词表示的数字转换成阿拉伯数字的方法
2015/07/02 Python
Python中表示字符串的三种方法
2017/09/06 Python
在Windows中设置Python环境变量的实例讲解
2018/04/28 Python
Python绘制堆叠柱状图的实例
2019/07/09 Python
keras模型保存为tensorflow的二进制模型方式
2020/05/25 Python
html5 video全屏播放/自动播放的实现示例
2020/08/06 HTML / CSS
具有防紫外线功能的高性能钓鱼服装:Hook&Tackle
2018/08/16 全球购物
女士和男士时尚鞋在线购物:Shoespie
2019/02/28 全球购物
文言文形式的学生求职信
2013/12/03 职场文书
2014年军人思想汇报范文
2014/10/12 职场文书
学校拾金不昧表扬信
2015/01/16 职场文书
出生公证书
2015/01/23 职场文书
卢旺达饭店观后感
2015/06/05 职场文书
2016入党积极分子党课培训心得体会
2016/01/06 职场文书
2019垃圾分类宣传口号汇总
2019/08/16 职场文书