jquery 插件 datatables 序號 欄目 JQuery 简体版
原文   原文鏈接

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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在,都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息