jquery插件dataTables自增序號。

本文轉載自查看原文 2016-09-08 16:43 9195 dataTables/ dataTables自增序號/ javascript

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提示錯誤，不過不用管，可以正常運行。

原理就是每次填充一行時，先獲取這一行的第一列，賦值為序號。序號就是填充到第幾行了。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jquery插件dataTables添加序號列 jquery 的datatables插件問題 jQuery的dataTables插件實現中文排序使用jquery datatables插件遇到fnReloadAjax的問題 jquery數據表插件DataTables 用法 [jQuery]jQuery DataTables插件自定義Ajax分頁實現 JQuery插件之Jquery.datatables.js用法及API JQuery插件之Jquery.datatables.js用法及api JQuery Datatables(一) sql 查詢結果自增序號