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 直接转换成数 ...
随机推荐
- JavaScript高级程序设计13.pdf
使用hasOwnProperty()方法检测一个属性存在实例还是原形中,当属性存在对象实例中时,返回true alert(person1.hasOwnProperty("name" ...
- windows下安装python的C扩展编译环境(解决“Unable to find vcvarsall.bat”)
个人文章除注明转载外,均为个人原创或者翻译. 个人文章欢迎各种形式的转载,但请18岁以上的转载者注明文章出处,尊重我的劳动,也尊重你的智商: 本文链接:http://www.cnblogs.com/f ...
- C++经典KMP算法的实现
#include <iostream> #include <algorithm> #include <vector> #include <string> ...
- 深入理解jvm之内存区域与内存溢出
文章目录 1. Java内存区域与内存溢出异常 1.1. 运行时数据区域 1.1.1. 程序计数器 1.1.2. java虚拟机栈 1.1.3. 本地方法栈 1.1.4. Java堆(Java Hea ...
- hibernate一对多关系映射(自身关联)
示例:一个类别(Category)下面有多个子类别,多个子类别属于同一个父类别. public class Category { private Integer id; private String ...
- angularjs post 跨域
web api搞好了:用Ajax妥妥的:但是前端用的AngulagJS,也懒得再换为Ajax了: 但是问题来了:提示: 已拦截跨源请求:同源策略禁止读取位于 http://x.x.x.x:port/a ...
- BZOJ 1835: [ZJOI2010]base 基站选址 [序列DP 线段树]
1835: [ZJOI2010]base 基站选址 题目描述 有N个村庄坐落在一条直线上,第i(i>1)个村庄距离第1个村庄的距离为Di.需要在这些村庄中建立不超过K个通讯基站,在第i个村庄建立 ...
- iOS开发总结-图片左右滑动浏览
// // PicViewController.m // BJ // // Created by shirenfeng on 16/9/13. // Copyright © 2016年 com.zyb ...
- Git 经常使用的命令
查看.参加.服从.删.恢复,复位更改文件 git help <command> # 演出command的help git show # 显示的提交内容 git show $id git c ...
- 读TIJ -1 对象入门
<Thinking In Java·第 1 章对象入门> 第 1 章约20页,是对面向对象的程序设计(OOP)的一个综述. 依照其前言所述: "当中包含对"什么是对象& ...