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提示错误,不过不用管,可以正常运行。
原理就是每次填充一行时,先获取这一行的第一列,赋值为序号。序号就是填充到第几行了。