dataTables官网提供了一种方式,使用后没有达到预期效果(js报错),没有深究原因。如果需要,可以按照下面的方式来。
1 $('#dataList').dataTable({ 2 "language": { 3 "sProcessing" : "<div ><img src='/NJLD_MONITOR/pt/common/images/load.gif'><span>计算中...</span></div>", 4 "lengthMenu" : "每页显示 _MENU_", 5 "zeroRecords" : "没有找到记录", 6 "info" : "_GOPAGE_ 当前 _PAGE_/ _PAGES_ 页 共_TOTAL_条", 7 "infoEmpty" : "无记录", 8 "infoFiltered" : "(从 _MAX_ 条记录过滤)", 9 "oPaginate" : { 10 "sFirst" : "首页", 11 "sPrevious" : "上一页", 12 "sNext" : "下一页", 13 "sLast" : "尾页" 14 } 15 }, 16 "bLengthChange" : false, 17 "bInfo" : false, 18 "bPaginate" : false, 19 "sDom" : 'rt<"bottom "<"pCus "pli>>', 20 "bProcessing" : true, 21 "serverSide" : true, 22 "bSort" : false, 23 "sAjaxSource" : "/NJLD_MONITOR/ControlPlan/caculateLngLat.do", 24 "scrollY" : h, 25 "fnServerData" : retrieveData, 26 "fnServerParams" : function(aoData){ 27 aoData.push({"name":"startDate" ,"value" : $('#startDate').val()}), 28 aoData.push({"name":"days" ,"value" : $('#days option:selected').val()}) 29 }, 30 "fnDrawCallback" : function(){ 31 this.api().column(0).nodes().each(function(cell, i) { 32 cell.innerHTML = i + 1; 33 }); 34 }, 35 "aoColumns" : [ 36 { 37 "sTitle" : "序号", 38 "sClass" : "dt-center", 39 "bSortable" : false, 40 "sWidth" : "4%", 41 "data" : null, 42 "targets" : 0 43 }, 44 { 45 "sTitle" : "日期", 46 "mDataProp" : "date", 47 "sClass" : "dt-center", 48 "bSortable" : false, 49 "sWidth" : "12%" 50 },{ 51 "sTitle" : "开灯时间(日落)", 52 "mDataProp" : "sunrise", 53 "sClass" : "dt-center", 54 "bSortable" : false, 55 "sWidth" : "12%" 56 },{ 57 "sTitle" : "关灯时间(日出)", 58 "mDataProp" : "sunset", 59 "sClass" : "dt-center", 60 "bSortable" : false, 61 "sWidth" : "10%" 62 } 63 ] 64 });
重要的是这一段:
"fnDrawCallback" : function(){ this.api().column(0).nodes().each(function(cell, i) { cell.innerHTML = i + 1; }); },
效果:
注意,这段js可以会被IDE提示错误,不过不用管,可以正常运行。
原理就是每次填充一行时,先获取这一行的第一列,赋值为序号。序号就是填充到第几行了。