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 框架小结 个人工作经验
Jun 13 Javascript
Javascript学习笔记5 类和对象
Jan 11 Javascript
Javascript操作cookie的函数代码
Oct 03 Javascript
仅30行代码实现Javascript中的MVC
Feb 15 Javascript
jQuery post数据至ashx实例详解
Nov 18 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
Nov 22 Javascript
javascript history对象详解
Feb 09 Javascript
Angular中ng-bind和ng-model的区别实例详解
Apr 10 Javascript
详解用webpack把我们的业务模块分开打包的方法
Jul 20 Javascript
vue router-link传参以及参数的使用实例
Nov 10 Javascript
解决vue-cli webpack打包开启Gzip 报错问题
Jul 24 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
Oct 25 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.2中date()函数显示时间与北京时间相差8小时的解决办法
2009/05/28 PHP
php htmlspecialchars加强版
2010/02/16 PHP
php使用cookie实现记住用户名和密码实现代码
2015/04/27 PHP
Jquery 获取checkbox的checked问题
2011/11/16 Javascript
Node.js生成HttpStatusCode辅助类发布到npm
2013/04/09 Javascript
使用JS 清空File控件的路径值
2013/07/08 Javascript
禁用JavaScript控制台调试的方法
2014/03/07 Javascript
node.js入门教程
2014/06/01 Javascript
删除Javascript Object中间的key
2014/11/18 Javascript
Javascript核心读书有感之语句
2015/02/11 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
2015/09/14 Javascript
js实现二级菜单渐隐显示
2015/11/03 Javascript
Javascript编程之继承实例汇总
2015/11/28 Javascript
基于JavaScript实现文字超出部分隐藏
2016/02/29 Javascript
vue.js学习之UI组件开发教程
2017/07/03 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
2021/01/30 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
2020/04/08 Javascript
JS浏览器BOM常见操作实例详解
2020/04/27 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
2020/11/06 Javascript
[58:32]EG vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[02:42]岂曰无衣,与子同袍!DOTA2致敬每一位守护人
2020/02/17 DOTA
解决pandas中读取中文名称的csv文件报错的问题
2018/07/04 Python
python使用matplotlib画柱状图、散点图
2019/03/18 Python
Django基于Models定制Admin后台实现过程解析
2020/11/11 Python
html5本地存储 localStorage操作使用详解
2016/09/20 HTML / CSS
美国最大点评网站:Yelp
2018/02/14 全球购物
中国制造网:Made-in-China.com
2019/10/25 全球购物
2014客服代表实习自我鉴定
2014/09/18 职场文书
国际残疾人日广播稿范文
2014/10/09 职场文书
初婚未育证明样本
2014/10/24 职场文书
开展党的群众路线教育实践活动情况汇报
2014/11/05 职场文书
初婚初育证明范本
2014/11/24 职场文书
综合素质评价自我评价
2015/03/06 职场文书
电力安全学习心得体会
2016/01/18 职场文书
Spring Boot实现文件上传下载
2022/08/14 Java/Android
Go中使用gjson来操作JSON数据的实现
2022/08/14 Golang