dataTables官網提供了一種方式,使用後沒有達到預期效果(js報錯),沒有深究緣由。若是須要,能夠按照下面的方式來。node
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 });
重要的是這一段:api
"fnDrawCallback" : function(){ this.api().column(0).nodes().each(function(cell, i) { cell.innerHTML = i + 1; }); },
效果:ide
注意,這段js能夠會被IDE提示錯誤,不過不用管,能夠正常運行。this
原理就是每次填充一行時,先獲取這一行的第一列,賦值爲序號。序號就是填充到第幾行了。spa