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 CSS 修改学习第四章 透明度设置
Feb 19 Javascript
javascript控制swfObject应用介绍
Nov 29 Javascript
JQuery中attr方法和removeAttr方法用法实例
May 18 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
Sep 05 Javascript
jquery按回车键实现表单提交的简单实例
May 25 Javascript
Bootstrap选项卡动态切换效果
Nov 28 Javascript
Vue2.0 http请求以及loading展示实例
Mar 06 Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
May 06 Javascript
详解vuex 渐进式教程实例代码
Nov 27 Javascript
javascript中join方法实例讲解
Feb 21 Javascript
微信小程序结合mock.js实现后台模拟及调试
Mar 28 Javascript
微信小程序本地存储实现每日签到、连续签到功能
Oct 09 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
Terran兵种对照表
2020/03/14 星际争霸
php更改目录及子目录下所有的文件后缀扩展名的代码
2010/10/12 PHP
php原生导出excel文件的两种方法(推荐)
2016/11/19 PHP
一个javascript图片阅览组件
2010/11/09 Javascript
jquery中加载图片自适应大小主要实现代码
2013/08/23 Javascript
优化Jquery,提升网页加载速度
2013/11/14 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
2015/09/25 Javascript
Vue.js基础知识汇总
2016/04/27 Javascript
全面解析Angular中$Apply()及$Digest()的区别
2016/08/04 Javascript
巧用canvas
2017/01/21 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
2017/07/13 Javascript
vue中实现在外部调用methods的方法(推荐)
2018/02/08 Javascript
用 js 写一个 js 解释器过程详解
2019/08/02 Javascript
vue瀑布流组件实现上拉加载更多
2020/03/10 Javascript
使用Python编写提取日志中的中文的脚本的方法
2015/04/30 Python
Python中你应该知道的一些内置函数
2017/03/31 Python
python中实现精确的浮点数运算详解
2017/11/02 Python
Python OpenCV中的resize()函数的使用
2019/06/20 Python
python datetime中strptime用法详解
2019/08/29 Python
PyQt5如何将.ui文件转换为.py文件的实例代码
2020/05/26 Python
Python3读写ini配置文件的示例
2020/11/06 Python
详解CSS3的perspective属性设置3D变换距离的方法
2016/05/23 HTML / CSS
西尔斯百货官网:Sears
2016/09/06 全球购物
美国标志性加大尺码时装品牌:Ashley Stewart
2016/12/15 全球购物
全球最大的中文旅行网站:去哪儿网
2017/11/16 全球购物
Nobody Denim官网:购买高级女士牛仔裤
2021/03/15 全球购物
软件缺陷的分类都有哪些
2014/08/22 面试题
传播学专业毕业生自荐信
2013/11/04 职场文书
毕业证丢失证明
2014/01/15 职场文书
贸易跟单员英文求职信
2014/04/19 职场文书
工程承诺书怎么写
2014/05/24 职场文书
大专学生求职自荐信
2014/07/06 职场文书
2015年全国爱眼日活动小结
2015/02/27 职场文书
趣味运动会广播稿
2015/08/19 职场文书
html2 canvas svg不能识别的解决方案
2021/06/03 HTML / CSS
vue中 this.$set的使用详解
2021/11/17 Vue.js