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. 免费开源的android项目分享

    免费开源的android项目分享:http://yun.baidu.com/share/link?shareid=2945649048&uk=3910054188

  2. [转]linux的ulimit各种限制之深入分析

    这是一篇非常好的文章,对ulimit的各个限制参数讲得非常透彻.原文链接:http://home.lupaworld.com/home-space-uid-56821-do-blog-id-23281 ...

  3. zendstudio xdebug 配置

    1. 下载XDebug: http://www.xdebug.org/download.php   通过phpinfo()查看你的php版本,现在相对应的dll文件

  4. Drawing Lines - SGU 135(简单递推)

    求N条直线最多能把一个平面分成几部分. 代码如下: ========================================================================== ...

  5. Pencil-一个开源免费的UI原型工具,自带ios和android模板

    Pencil是一个开源免费的UI原型工具,自带ios和android模板,可以很方便的做mockup. 下图是一个官方展示的模板:         

  6. LINQ多条件OR模糊查询

    本文章转载:http://www.cnblogs.com/guyun/archive/2012/10/18/2729888.html 需求是这样的,有一张表tbl(Key[int],Value[str ...

  7. Codeforces Beta Round #51 D. Beautiful numbers

    D. Beautiful numbers time limit per test 4 seconds memory limit per test 256 megabytes input standar ...

  8. nrf51822蓝牙芯片ble_app_proximity程序总结

    近期由于钥匙的事情,研究了下官方自带的ble_app_proximity程序,事实上就是跟防丢有关系的程序. 同一时候也发现了看nordic程序的一些门道,主要还是看协议栈里面的一些service,首 ...

  9. 浙江大学PAT上机题解析之1014. 福尔摩斯的约会 (20)

    1014. 福尔摩斯的约会 (20) 时间限制   50 ms 内存限制   32000 kB 代码长度限制   8000 B 判题程序     Standard     作者     CHEN, Y ...

  10. IOS-NSDateFormatter使用介绍

    IOS-NSDateFormatter使用介绍 NSDateFormatter的使用: NSDate *nowDate = [[NSDate alloc] init]; NSDateFormatter ...