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 实现TreeView CheckBox全选效果
Jan 11 Javascript
Jquery Validate 正则表达式实用验证代码大全
Aug 23 Javascript
Javascript中对象继承的实现小例
May 12 Javascript
Extjs 点击复选框在表格中增加相关信息行
Jul 12 Javascript
js判断数组key是否存在(不用循环)的简单实例
Aug 03 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
Sep 04 Javascript
Javascript中判断一个值是否为undefined的方法详解
Sep 28 Javascript
详解Angular的8个主要构造块
Jun 20 Javascript
switchery按钮的使用方法
Dec 18 Javascript
Webpack中雪碧图插件使用详解
May 25 Javascript
Vue.js的复用组件开发流程完整记录
Nov 29 Javascript
JavaScript this在函数中的指向及实例详解
Oct 14 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
全国FM电台频率大全 - 22 重庆市
2020/03/11 无线电
生成sessionid和随机密码的例子
2006/10/09 PHP
PHP开发过程中常用函数收藏
2009/12/14 PHP
PHP中的错误处理、异常处理机制分析
2012/05/07 PHP
PHP进程同步代码实例
2015/02/12 PHP
php通过array_push()函数添加多个变量到数组末尾的方法
2015/03/18 PHP
PHP实现唤起微信支付功能
2019/02/18 PHP
js类中获取外部函数名的方法与代码
2007/09/12 Javascript
运算符&&的三个不同层次
2013/04/07 Javascript
JS实现两表格里数据来回转移的方法
2015/05/28 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
2015/10/16 Javascript
微信小程序通过api接口将json数据展现到小程序示例
2017/01/20 Javascript
NodeJS、NPM安装配置步骤(windows版本) 以及环境变量详解
2017/05/13 NodeJs
JavaScript中Require调用js的实例分享
2017/10/27 Javascript
vue中使用localstorage来存储页面信息
2017/11/04 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
2019/09/23 Javascript
部署vue+Springboot前后端分离项目的步骤实现
2020/05/31 Javascript
Python tkinter模块弹出窗口及传值回到主窗口操作详解
2017/07/28 Python
wxPython的安装图文教程(Windows)
2017/12/28 Python
python 使用pdfminer3k 读取PDF文档的例子
2019/08/27 Python
python自动结束mysql慢查询会话的实例代码
2019/10/27 Python
python实现四人制扑克牌游戏
2020/04/22 Python
HTML5各种头部meta标签的功能(推荐)
2017/03/13 HTML / CSS
美特斯邦威官方商城:邦购网
2016/10/13 全球购物
加利福尼亚州威尼斯的女性奢侈品设计师服装和概念店:Mona Moore
2018/09/13 全球购物
俄罗斯皮肤健康中心:Pharmacosmetica.ru
2020/02/22 全球购物
Expedia瑞典官网:预订度假屋、酒店、汽车租赁、机票等
2021/01/23 全球购物
英文自我鉴定
2013/12/10 职场文书
表彰先进集体通报
2014/01/12 职场文书
《跨越百年的美丽》教学反思
2014/02/11 职场文书
农民工工资发放承诺书
2014/03/31 职场文书
学生干部培训方案
2014/06/12 职场文书
2016党校培训心得体会
2016/01/07 职场文书
2019年最新版见习人员管理制度!
2019/07/08 职场文书
LayUI+Shiro实现动态菜单并记住菜单收展的示例
2021/05/06 Javascript
使用Oracle命令进行数据库备份与还原
2021/12/06 Oracle