jquery插件dataTables自增序号。

Posted 2020-08-07 天下第二也挺好

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提示错误，不过不用管，可以正常运行。

原理就是每次填充一行时，先获取这一行的第一列，赋值为序号。序号就是填充到第几行了。