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 相关文章推荐
js实现DIV的一些简单控制
Jun 04 Javascript
23个超流行的jQuery相册插件整理分享
Apr 25 Javascript
Javascript常用字符串判断函数代码分享
Dec 08 Javascript
jQuery 重复加载错误以及修复方法
Dec 16 Javascript
JS如何实现文本框随文本的长度而增长
Jul 30 Javascript
JQuery操作textarea,input,select,checkbox方法
Sep 02 Javascript
详解Angular中的自定义服务Service、Provider以及Factory
Apr 22 Javascript
vue实现页面加载动画效果
Sep 19 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
Feb 28 Javascript
js操作二进制数据方法
Mar 03 Javascript
Vue3新特性之在Composition API中使用CSS Modules
Jul 13 Javascript
JS实现密码框效果
Sep 10 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 类型转换函数intval
2009/06/20 PHP
php date与gmdate的获取日期的区别
2010/02/08 PHP
PHP中防止SQL注入攻击和XSS攻击的两个简单方法
2010/04/15 PHP
PHP把小数转成整数3种方法
2014/06/30 PHP
php常用hash加密函数
2014/11/22 PHP
PHP中使用CURL获取页面title例子
2015/01/07 PHP
PHP实现的oracle分页函数实例
2016/01/25 PHP
PHP下载文件函数与用法示例
2019/09/27 PHP
Javascript 继承机制的实现
2009/08/12 Javascript
javascript中的undefined 与 null 的区别  补充篇
2010/03/17 Javascript
jQuery EasyUI中对表格进行编辑的实现代码
2010/06/10 Javascript
jquery如何实现锚点链接之间的平滑滚动
2013/12/02 Javascript
用unescape反编码得出汉字示例
2014/04/24 Javascript
js跨域资源共享 基础篇
2016/07/02 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
2016/09/20 Javascript
javaScript嗅探执行神器-sniffer.js
2017/02/14 Javascript
jQuery设计思想
2017/03/07 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
2017/04/25 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
2017/07/21 Javascript
jquery实现侧边栏左右伸缩效果的示例
2017/12/19 jQuery
Vue组件的使用及个人理解与介绍
2019/02/09 Javascript
Vue为什么要谨慎使用$attrs与$listeners
2020/08/27 Javascript
python通过smpt发送邮件的方法
2015/04/30 Python
用Python写飞机大战游戏之pygame入门(4):获取鼠标的位置及运动
2015/11/05 Python
利用python获取当前日期前后N天或N月日期的方法示例
2017/07/30 Python
AI人工智能 Python实现人机对话
2017/11/13 Python
python numpy格式化打印的实例
2018/05/14 Python
美国创意礼品网站:UncommonGoods
2017/02/03 全球购物
师范应届生教师求职信
2013/11/05 职场文书
计算机科学与技术应届生求职信
2013/11/07 职场文书
岗位职责风险防控
2014/02/18 职场文书
新学期新寄语,献给新生们!
2019/11/15 职场文书
Python机器学习之底层实现KNN
2021/06/20 Python
什么是动态刷新率DRR? Windows11动态刷新率功能介绍
2021/11/21 数码科技
Beekeeper Studio开源数据库管理工具比Navicat更炫酷
2022/06/21 数据库
JavaScript架构localStorage特殊场景下二次封装操作
2022/06/21 Javascript