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 相关文章推荐
解析prototype,JQuery中跳出each循环的方法
Dec 12 Javascript
js 通过html()及text()方法获取并设置p标签的显示值
May 14 Javascript
javascript 闭包详解
Feb 15 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
Mar 06 Javascript
js点击按钮实现带遮罩层的弹出视频效果
Dec 19 Javascript
JavaScript遍历求解数独问题的主要思路小结
Jun 12 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
Jan 06 Javascript
利用node.js制作命令行工具方法教程(一)
Jun 22 Javascript
Redux 和 Mobx的选择问题:让你不再困惑!
Sep 18 Javascript
详解HTML5 使用video标签实现选择摄像头功能
Oct 25 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
Oct 12 Javascript
Express结合Webpack的全栈自动刷新
May 23 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脚本加密专家php解密算法
2020/09/13 PHP
php学习之流程控制实现代码
2011/06/09 PHP
PHP中获取文件扩展名的N种方法小结
2012/02/27 PHP
ThinkPHP打水印及设置水印位置的方法
2016/10/14 PHP
PHP中的多种加密技术及代码示例解析
2016/10/20 PHP
YII中Ueditor富文本编辑器文件和图片上传的配置图文教程
2017/03/15 PHP
如何实现浏览器上的右键菜单
2006/07/10 Javascript
网页自动跳转代码收集
2009/09/27 Javascript
Javascript 实现复制(Copy)动作方法大全
2014/06/20 Javascript
JavaScript中的DSL元编程介绍
2015/03/15 Javascript
无刷新上传文件并返回自定义值
2015/06/11 Javascript
JavaScript使用RegExp进行正则匹配的方法
2015/07/11 Javascript
利用JS实现数字增长
2016/07/28 Javascript
详解Angular 4.x Injector
2017/05/04 Javascript
微信小程序利用canvas 绘制幸运大转盘功能
2018/07/06 Javascript
vue中的自定义分页插件组件的示例
2018/08/18 Javascript
Vue CLI3 开启gzip压缩文件的方式
2018/09/30 Javascript
详解Nuxt.js中使用Element-UI填坑
2019/09/06 Javascript
Pyramid Mako模板引入helper对象的步骤方法
2013/11/27 Python
使用python绘制人人网好友关系图示例
2014/04/01 Python
解决python写的windows服务不能启动的问题
2014/04/15 Python
使用FastCGI部署Python的Django应用的教程
2015/07/22 Python
在win和Linux系统中python命令行运行的不同
2016/07/03 Python
Python网络编程详解
2017/10/31 Python
Python寻找两个有序数组的中位数实例详解
2018/12/05 Python
基于Python在MacOS上安装robotframework-ride
2018/12/28 Python
获取django框架orm query执行的sql语句实现方法分析
2019/06/20 Python
Tory Burch德国官网:美国时尚生活品牌
2018/01/03 全球购物
当文件系统受到破坏时,如何检查和修复系统?
2012/03/09 面试题
终止劳动合同协议书
2014/04/14 职场文书
岗位职责说明书模板
2014/07/30 职场文书
法院四风对照检查材料思想汇报
2014/10/06 职场文书
区域经理岗位职责
2015/02/02 职场文书
《金色的草地》教学反思
2016/02/17 职场文书
CocosCreator ScrollView优化系列之分帧加载
2021/04/14 Python
php将xml转化对象的实例详解
2021/11/17 PHP