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 html 静态页面传参数
Apr 10 Javascript
Jquery 常用方法经典总结
Jan 28 Javascript
javascript定时保存表单数据的代码
Mar 17 Javascript
在JavaScript中typeof的用途介绍
Apr 11 Javascript
jquery实现div拖拽宽度示例代码
Jul 31 Javascript
jQuery表单获取和失去焦点输入框提示效果的实例代码
Aug 01 Javascript
extjs两个tbar问题探讨
Aug 08 Javascript
JS建造者模式基本用法实例分析
Jun 30 Javascript
AngularJS报错$apply already in progress的解决方法分析
Jan 30 Javascript
Vue中的v-for指令不起效果的解决方法
Sep 27 Javascript
小程序组件之自定义顶部导航实例
Jun 12 Javascript
vue实现下载文件流完整前后端代码
Nov 17 Vue.js
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 coding standard
2007/03/16 PHP
php 批量添加多行文本框textarea一行一个
2014/06/03 PHP
php_imagick实现图片剪切、旋转、锐化、减色或增加特效的方法
2014/12/15 PHP
php实现简易聊天室应用代码
2015/09/23 PHP
PHP调试的强悍利器之PHPDBG
2016/02/22 PHP
php版微信开发之接收消息,自动判断及回复相应消息的方法
2016/09/23 PHP
php+ajax实现仿百度查询下拉内容功能示例
2017/10/20 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
javascritp实现input输入框相关限制用法
2007/06/29 Javascript
JavaScript中的Screen屏幕对象
2008/01/16 Javascript
document节点对象的获取方式示例介绍
2013/12/24 Javascript
javascript基础语法——全面理解变量和标识符
2016/06/02 Javascript
JS 面向对象之继承---多种组合继承详解
2016/07/10 Javascript
Vue常用指令V-model用法
2017/03/08 Javascript
ECMAScript6 新特性范例大全
2017/03/24 Javascript
js实现随机点名系统(实例讲解)
2017/10/18 Javascript
react-native使用leanclound消息推送的方法
2018/08/06 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
2019/05/10 Javascript
小程序实现层叠卡片滑动效果
2019/08/26 Javascript
layui-select动态选中值的例子
2019/09/23 Javascript
原生JavaScript实现的无缝滚动功能详解
2020/01/17 Javascript
[54:53]完美世界DOTA2联赛PWL S2 GXR vs PXG 第二场 11.18
2020/11/18 DOTA
Python实现partial改变方法默认参数
2014/08/18 Python
Python操作MySQL简单实现方法
2015/01/26 Python
Django 2.0版本的新特性抢先看!
2018/01/05 Python
Python3多线程操作简单示例
2018/05/22 Python
python给list排序的简单方法
2020/12/10 Python
ALDO美国官网:加拿大女鞋品牌
2018/12/28 全球购物
美国电子产品购物网站:BuyDig.com
2020/06/17 全球购物
个人自我鉴定怎么写
2013/10/28 职场文书
村庄绿化方案
2014/05/07 职场文书
党员个人剖析材料2014
2014/10/08 职场文书
销售区域经理岗位职责
2015/04/10 职场文书
狼牙山五壮士观后感
2015/06/09 职场文书
导游词之四川武侯祠
2019/10/21 职场文书
导游词之江南周庄
2019/12/06 职场文书