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自增序号。的更多相关文章

  1. jquery插件dataTables添加序号列

    官网方法实例: $(document).ready(function() {     var t = $('#example').DataTable({         "columnDef ...

  2. JQuery插件datatables相关api

    学习可参考:http://www.guoxk.com/node/jquery-datatables http://yuemeiqing2008-163-com.iteye.com/blog/20069 ...

  3. 基于JQuery可拖动列表格插件DataTables的踩坑记

    前言 最近项目中在使用能够拖动列调整列位置顺序的表格插件---DataTables,这也是目前我找到的唯一一种存在有这种功能的插件. 在查找使用方法的过程中发现可用案例并不多,且大多言语不详.本文将全 ...

  4. JQuery插件之Jquery.datatables.js用法及api

    1.DataTables的默认配置 $(document).ready(function() { $('#example').dataTable(); } ); 示例:http://www.guoxk ...

  5. jQuery 的插件 dataTables

    ---恢复内容开始--- jQuery 的插件 dataTables 是一个优秀的表格插件,提供了针对表格的排序.浏览器分页.服务器分页.筛选.格式化等功能.dataTables 的网站上也提供了大量 ...

  6. jQuery的dataTables插件实现中文排序

    最近在写Java web. 写JSP的时候发现一个很好玩的插件dataTables.分页.过滤.排序等等手到擒来. 哎哎哎,有点点可惜的是排序这个功能不支持中文.于是网上查查找找,现在把方法整理一下, ...

  7. DataTables中自增序号的实现

    最近工作中,一直在写前端的东西,一直以来前端都接触的少,所以侧重点也没放在这边,导致现在工作进展比较慢,果然偷懒是要不得的啊.... 今天刚写了一个在DataTables中增加一列自增序号,刚开始以为 ...

  8. 解决JQuery中datatables设置隐藏显示列多次提交后台刷新数据的问题

    此次项目开发过程中用到了Jquery的Datatables插件,无疑他是数据列表展示,解决MVC中同步过程中先走控制器后返回视图,查询数据过程中无法提示等待的弊端, 而且他所提供的各种方法也都有较强的 ...

  9. day 57 jQuery插件

    在jQuery的console里面 '321'+8  输出结果是"3218"  直接作为字符串给拼接上了 如果是"321"-8 输出结果就是313 直接转换成数 ...

随机推荐

  1. HDU 4716 A Computer Graphics Problem 2013年四川省赛题

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4716 题目大意不用解释了吧,看案例就能明白 #include<cstdio> #inclu ...

  2. 基础排序算法之并归排序(Merge Sort)

    并归排序是学习分治法 (Merge Sort) 的好例子.而且它相对于选择,插入,冒泡排序来说,算法性能有一定提升.我首先会描述要解决的问题,并给出一个并归排序的例子.之后是算法的思路以及给出伪代码. ...

  3. Mysql性能优化那些事

    ​    ​对于全栈而言,数据库技能不可或缺,关系型数据库或者nosql,内存型数据库或者偏磁盘存储的数据库,对象存储的数据库或者图数据库--林林总总,但是第一必备技能还应该是MySQL.从LAMP的 ...

  4. ASP.NET中的文件上传大小限制的问题

    一.文件大小限制的问题 首先我们来说一下如何解决ASP.NET中的文件上传大小限制的问题,我们知道在默认情况下ASP.NET的文件上传大小限制为2M,一般情况下,我们可以采用更改WEB.Config文 ...

  5. Project Server 2013两个权限模型介绍

    Project Server 2013中无法使用“新建用户”功能? 当我们的Project Server 2013刚刚安装好时,在PWA的服务器设置中找不到新建用户的选项,是什么原因造成的呢? 原来是 ...

  6. System.in与System.out(标准输入与标准输出)详解

    package test; import java.io.IOException; import java.io.InputStream; import java.io.OutputStream; p ...

  7. 初步掌握HDFS的架构及原理

    目录 HDFS 是做什么的 HDFS 从何而来 为什么选择 HDFS 存储数据 HDFS 如何存储数据 HDFS 如何读取文件 HDFS 如何写入文件 HDFS 副本存放策略 Hadoop2.x新特性 ...

  8. Android开发:最详细的 NavigationDrawer 开发实践总结

    最详细的 NavigationDrawer 开发实践总结 继前面写的两篇文章之后(有问题欢迎反馈哦): Android开发:Translucent System Bar 的最佳实践 Android开发 ...

  9. Log4J2基本配置

    [1]. Log4J2入门: <1>. 导入Jar包: log4j-api-2.0-beta9.jar log4j-core-2.0-beta9.jar <2>. 编写代码: ...

  10. ubuntu下的openfire安装、配置、运行

    openfire服务器              Openfire 采用Java开发,开源的实时协作(RTC)服务器基于XMPP(Jabber)协议.您可以使用它轻易的构建高效率的即时通信服务器.Op ...