jquery插件dataTables自增序号。
dataTables官网提供了一种方式,使用后没有达到预期效果(js报错),没有深究原因。如果需要,可以按照下面的方式来。
$('#dataList').dataTable({
"language": {
"sProcessing" : "<div ><img src='/NJLD_MONITOR/pt/common/images/load.gif'><span>计算中...</span></div>",
"lengthMenu" : "每页显示 _MENU_",
"zeroRecords" : "没有找到记录",
"info" : "_GOPAGE_ 当前 _PAGE_/ _PAGES_ 页 共_TOTAL_条",
"infoEmpty" : "无记录",
"infoFiltered" : "(从 _MAX_ 条记录过滤)",
"oPaginate" : {
"sFirst" : "首页",
"sPrevious" : "上一页",
"sNext" : "下一页",
"sLast" : "尾页"
}
},
"bLengthChange" : false,
"bInfo" : false,
"bPaginate" : false,
"sDom" : 'rt<"bottom "<"pCus "pli>>',
"bProcessing" : true,
"serverSide" : true,
"bSort" : false,
"sAjaxSource" : "/NJLD_MONITOR/ControlPlan/caculateLngLat.do",
"scrollY" : h,
"fnServerData" : retrieveData,
"fnServerParams" : function(aoData){
aoData.push({"name":"startDate" ,"value" : $('#startDate').val()}),
aoData.push({"name":"days" ,"value" : $('#days option:selected').val()})
},
"fnDrawCallback" : function(){
this.api().column(0).nodes().each(function(cell, i) {
cell.innerHTML = i + 1;
});
},
"aoColumns" : [
{
"sTitle" : "序号",
"sClass" : "dt-center",
"bSortable" : false,
"sWidth" : "4%",
"data" : null,
"targets" : 0
},
{
"sTitle" : "日期",
"mDataProp" : "date",
"sClass" : "dt-center",
"bSortable" : false,
"sWidth" : "12%"
},{
"sTitle" : "开灯时间(日落)",
"mDataProp" : "sunrise",
"sClass" : "dt-center",
"bSortable" : false,
"sWidth" : "12%"
},{
"sTitle" : "关灯时间(日出)",
"mDataProp" : "sunset",
"sClass" : "dt-center",
"bSortable" : false,
"sWidth" : "10%"
}
]
});
重要的是这一段:
"fnDrawCallback" : function(){
this.api().column(0).nodes().each(function(cell, i) {
cell.innerHTML = i + 1;
});
},
效果:

注意,这段js可以会被IDE提示错误,不过不用管,可以正常运行。

原理就是每次填充一行时,先获取这一行的第一列,赋值为序号。序号就是填充到第几行了。
jquery插件dataTables自增序号。的更多相关文章
- jquery插件dataTables添加序号列
官网方法实例: $(document).ready(function() { var t = $('#example').DataTable({ "columnDef ...
- JQuery插件datatables相关api
学习可参考:http://www.guoxk.com/node/jquery-datatables http://yuemeiqing2008-163-com.iteye.com/blog/20069 ...
- 基于JQuery可拖动列表格插件DataTables的踩坑记
前言 最近项目中在使用能够拖动列调整列位置顺序的表格插件---DataTables,这也是目前我找到的唯一一种存在有这种功能的插件. 在查找使用方法的过程中发现可用案例并不多,且大多言语不详.本文将全 ...
- JQuery插件之Jquery.datatables.js用法及api
1.DataTables的默认配置 $(document).ready(function() { $('#example').dataTable(); } ); 示例:http://www.guoxk ...
- jQuery 的插件 dataTables
---恢复内容开始--- jQuery 的插件 dataTables 是一个优秀的表格插件,提供了针对表格的排序.浏览器分页.服务器分页.筛选.格式化等功能.dataTables 的网站上也提供了大量 ...
- jQuery的dataTables插件实现中文排序
最近在写Java web. 写JSP的时候发现一个很好玩的插件dataTables.分页.过滤.排序等等手到擒来. 哎哎哎,有点点可惜的是排序这个功能不支持中文.于是网上查查找找,现在把方法整理一下, ...
- DataTables中自增序号的实现
最近工作中,一直在写前端的东西,一直以来前端都接触的少,所以侧重点也没放在这边,导致现在工作进展比较慢,果然偷懒是要不得的啊.... 今天刚写了一个在DataTables中增加一列自增序号,刚开始以为 ...
- 解决JQuery中datatables设置隐藏显示列多次提交后台刷新数据的问题
此次项目开发过程中用到了Jquery的Datatables插件,无疑他是数据列表展示,解决MVC中同步过程中先走控制器后返回视图,查询数据过程中无法提示等待的弊端, 而且他所提供的各种方法也都有较强的 ...
- day 57 jQuery插件
在jQuery的console里面 '321'+8 输出结果是"3218" 直接作为字符串给拼接上了 如果是"321"-8 输出结果就是313 直接转换成数 ...
随机推荐
- 修改maven中的jdk版本
1.修改项目的pom.xml文件 <build> <plugins> <plugin> <groupId>org.apache.maven.plugin ...
- hdu 4293 dp求最大权值不重合区间
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4293 #include<cstdio> #include<cstring> # ...
- poj 3687 Labeling Balls【反向拓扑】
Labeling Balls Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 12246 Accepted: 3508 D ...
- nyoj 88 汉诺塔(一)【快速幂】
汉诺塔(一) 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 在印度,有这么一个古老的传说:在世界中心贝拿勒斯(在印度北部)的圣庙里,一块黄铜板上插着三根宝石针.印度 ...
- 查看线程linux cpu使用率
Linux下如何查看高CPU占用率线程 LINUX CPU利用率计算 转 http://www.cnblogs.com/lidabo/p/4738113.html目录(?)[-] proc文件系统 p ...
- memcache基本讲解
Memcached技术 介绍: memcached是一种缓存技术, 他可以把你的数据放入内存,从而通过内存访问提速,因为内存最快的, memcached技术的主要目的提速, 在memachec 中维护 ...
- StopWatch
附件 http://download.csdn.net/detail/teststudio/6575241 主窗体UNIT unit MainForm; interface uses Windows, ...
- 开始lisp的旅程
不知道是不是<黑客与画家>的老pual太能忽悠了,一直想把他吹捧的lisp学习一下. 看common lisp和On lisp两本书也有一段时间了,中间还夹着看了一点SICP和land o ...
- etrace 跟踪 nginx之HTTP请求流程
curl 127.0.0.1 | | | \--ngx_epoll_process_events | | | | \--ngx_time_update | | | | | \--ngx_gmtime ...
- Java基础知识强化之集合框架笔记17:List集合的特有的遍历功能
1. List集合的特有遍历功能: size()和 get()方法结合使用 2. 代码示例: package cn.itcast_03; import java.util.ArrayList; imp ...