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 相关文章推荐
用jscript启动sqlserver
Jun 21 Javascript
JavaScript基础知识学习笔记
Dec 02 Javascript
jQuery制作拼图小游戏
Jan 12 Javascript
jquery代码实现简单的随机图片瀑布流效果
Apr 20 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
Oct 10 Javascript
jQuery中ajax的load()与post()方法实例详解
Jan 05 Javascript
String字符串截取的四种方式总结
Nov 28 Javascript
微信小程序日期时间选择器使用方法
Feb 01 Javascript
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
vue获取验证码倒计时组件
Aug 26 Javascript
vue 需求 data中的数据之间的调用操作
Aug 05 Javascript
如何用JavaScript学习算法复杂度
Apr 30 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编程开发“虚拟域名”系统
2006/10/09 PHP
图象函数中的中文显示
2006/10/09 PHP
PHP 命名空间实例说明
2011/01/27 PHP
Smarty foreach控制循环次数的实现详解
2013/07/03 PHP
浅析echo(),print(),print_r(),return之间的区别
2013/11/27 PHP
Zend Framework教程之配置文件application.ini解析
2016/03/10 PHP
PHP面向对象程序设计高级特性详解(接口,继承,抽象类,析构,克隆等)
2016/12/02 PHP
PHP基于自定义函数生成笛卡尔积的方法示例
2017/09/30 PHP
php实现登录页面的简单实例
2019/09/29 PHP
Jquery Validation插件防止重复提交表单的解决方法
2010/03/05 Javascript
基于jquery插件实现常见的幻灯片效果
2013/11/01 Javascript
js 走马灯简单实例
2013/11/21 Javascript
每天一篇javascript学习小结(面向对象编程)
2015/11/20 Javascript
js使用cookie记录用户名的方法
2015/11/26 Javascript
JavaScript的Backbone.js框架的一些使用建议整理
2016/02/14 Javascript
深入浅析AngularJS和DataModel
2016/02/16 Javascript
vue-cli之router基本使用方法详解
2017/10/17 Javascript
react-native使用leanclound消息推送的方法
2018/08/06 Javascript
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
2018/08/20 Javascript
微信小程序自定义select下拉选项框组件的实现代码
2018/08/28 Javascript
Vue中插入HTML代码的方法
2018/09/21 Javascript
[01:06:42]VP vs NewBee Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
在Mac OS系统上安装Python的Pillow库的教程
2015/11/20 Python
python实现字典(dict)和字符串(string)的相互转换方法
2017/03/01 Python
Python2实现的LED大数字显示效果示例
2017/09/04 Python
Python实现求一个集合所有子集的示例
2018/05/04 Python
Win10下python 2.7.13 安装配置方法图文教程
2018/09/18 Python
Python实现常见的回文字符串算法
2018/11/14 Python
从运行效率与开发效率比较Python和C++
2018/12/14 Python
opencv设置采集视频分辨率方式
2019/12/10 Python
HTML5 input新增type属性color颜色拾取器的实例代码
2018/08/27 HTML / CSS
阿玛尼化妆品美国官网:Giorgio Armani Beauty
2017/02/02 全球购物
香港中原电器网上商店:Chung Yuen
2019/06/26 全球购物
自我鉴定范文
2013/11/10 职场文书
通信工程专业毕业生推荐信
2013/12/25 职场文书
Python djanjo之csrf防跨站攻击实验过程
2021/05/14 Python