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 文件引入实现代码
Apr 23 Javascript
js判断变量是否未定义的代码
Mar 28 Javascript
jquery判断复选框是否被选中的方法
Oct 16 Javascript
prototype.js常用函数详解
Jun 18 Javascript
基于JavaScript实现前端文件的断点续传
Oct 17 Javascript
JavaScript实现垂直向上无缝滚动特效代码
Nov 23 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
Mar 09 Javascript
vue渲染时闪烁{{}}的问题及解决方法
Mar 28 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
Oct 20 Javascript
vue中使用微信公众号js-sdk踩坑记录
Mar 29 Javascript
使用layer.msg 时间设置不起作用的解决方法
Sep 12 Javascript
Angular+ionic实现折叠展开效果的示例代码
Jul 29 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函数传值的引用传递注意事项分析
2016/06/25 PHP
Yii2针对指定url的生成及图片等的引入方法小结
2016/07/18 PHP
详解阿里云视频直播PHP-SDK接入教程
2020/07/09 PHP
原生javascript实现无间缝滚动示例
2014/01/28 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
2014/09/23 Javascript
js onmousewheel事件多次触发问题解决方法
2014/10/17 Javascript
浅谈Sizzle的“编译原理”
2015/04/14 Javascript
JS实现的文字与图片定时切换效果代码
2015/10/06 Javascript
javascript实现五星评分功能
2015/11/10 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
2015/11/17 Javascript
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
2016/10/27 Javascript
基于jQuery实现瀑布流页面
2017/04/11 jQuery
jQuery遮罩层实例讲解
2017/05/11 jQuery
基于$.ajax()方法从服务器获取json数据的几种方式总结
2018/01/31 Javascript
vue实现双向绑定和依赖收集遇到的坑
2018/11/29 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
2020/08/21 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
2019/01/09 jQuery
Node.js API详解之 string_decoder用法实例分析
2020/04/29 Javascript
python实现在每个独立进程中运行一个函数的方法
2015/04/23 Python
python-opencv在有噪音的情况下提取图像的轮廓实例
2017/08/30 Python
python re模块findall()函数实例解析
2018/01/19 Python
详解python和matlab的优势与区别
2019/06/28 Python
关于ResNeXt网络的pytorch实现
2020/01/14 Python
Tensorflow 多线程设置方式
2020/02/06 Python
Python基于内置库pytesseract实现图片验证码识别功能
2020/02/24 Python
python利用opencv实现颜色检测
2021/02/23 Python
加拿大健康、婴儿和美容产品在线购物:Well.ca
2016/11/30 全球购物
GafasWorld哥伦比亚:网上购买眼镜
2017/11/28 全球购物
戛纳奢侈品商店:Jacques Loup法国
2019/11/04 全球购物
英语自我评价范文
2014/01/24 职场文书
2014年开学第一课活动方案
2014/03/06 职场文书
经营理念标语
2014/06/21 职场文书
工商管理自荐书
2014/07/06 职场文书
2015年银行员工工作总结
2015/04/24 职场文书
边城读书笔记
2015/06/29 职场文书
2016年“我们的节日·清明节”活动总结
2016/04/01 职场文书