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. UValive 5713 Qin Shi Huang's National Road System

    Qin Shi Huang's National Road System Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/3 ...

  2. Windows下父进程监视子进程状态

    最近研究自动化测试,需要获取程序的运行状态及结果,下面是些参考资料. 原文地址:http://blog.csdn.net/ariesjzj/article/details/7226443 Linux下 ...

  3. Eclipse svn图标不显示

    在菜单栏中:windows ->preferences->General->Appearance->Lable Decorations 勾选其中的 SVN 项,最后应用确认之后 ...

  4. effective C++ 读后笔记

    首先不得不说侯捷翻译的书大部分我都很喜欢,因为侯捷本身是一名出色的C++技术专家.这本书讲的是C++如何高效的运行,我想要成为一名卓越的开发人员,代码的高效性是必不可少的.很多人的代码质量很差,即使能 ...

  5. mysql定时器三部曲

    1.查看事件状态 SELECT @@event_scheduler;  或    show VARIABLES LIKE '%sche%'; 2.创建存储过程 示例一批量新增: delimiter | ...

  6. NET设计模式-单例模式(Singleton Pattern)

    1. 概述 Singleton Pattren 要求一个类有且仅有一个实例,并且提供一个全局变量.这个创建的对象是独一无二的,在这个单独对象实例中,集中所创建类的所有属性和方法. 在创建一个单例,何时 ...

  7. 【设计模式 - 2】之单例模式(Singleton)

    1      模式简介 单例模式在代码中是非常常用的,如线程池.数据库连接.注册表.共享资源.一些非常消耗资源的组件,等等. 单例模式主要解决如下问题: 确保一个特殊类的实例是独一无二的: 确保这个类 ...

  8. js判断input输入框为空时遇到的问题 弹窗后,光标没有定位到输入框,而是直接执行我的处理页面程序

    无论是会员注册还是提交订单,我们都要使用到form表单,此时我们在处理数据时,就要判断用户填写的信息.一次是直接通过js判断input输入框是否没有填信息,然后在后台处理文件中通过过滤字符串后再次判断 ...

  9. [Redux] Persisting the State to the Local Storage

    We will learn how to use store.subscribe() to efficiently persist some of the app’s state to localSt ...

  10. android 45 通知

    package com.sxt.day07_01; import android.app.Activity; import android.app.Notification; import andro ...