jQuery DataTables中的動態列

Question

在我的應用程序中，有一些列被授予特權。 如果沒有給出該列訪問該特定列的權限未顯示。

我的代碼是這樣的：http://jsfiddle.net/oscar11/5jccbzdy/11/

// DataTable 
    var table = $('#example').DataTable({ 
     "order": [[0, 'asc']], 
     "drawCallback": function (settings){ 
      var api = this.api(); 

      // Zero-based index of the column containing names 
      var col_name = 0; 

      // If ordered by column containing names 
      if (api.order()[0][0] === col_name) { 
       var rows = api.rows({ page: 'current' }).nodes(); 
       var group_last = null; 

       api.column(col_name, { page: 'current' }).data().each(function (name, index){ 
        var group = name; 
        var data = api.row(rows[index]).data(); 

        if (group_last !== group) { 
         $(rows[index]).before(
          '<tr class="group" style="background-color:' + data[4] + '"><td colspan="5">' + group + '</td></tr>' 
         ); 

         group_last = group; 
        } 
       }); 
      } 
     } 
    }); 

如何使上面的代碼變得更具活力和調整被賦予特權的列數？

如果被賦予特權的列數：5，那麼：

'<tr class="group" style="background-color:' + data[4] + '"><td colspan="5">' + group + '</td></tr>' 

如果被賦予特權的列數：3，則：

'<tr class="group" style="background-color:' + data[2] + '"><td colspan="3">' + group + '</td></tr>' 

謝謝

Answer 1

SOLUTION

您可以使用columns.name選項爲包含顏色的數據列定義名稱。

然後在行分組代碼中，您可以使用column-selectorcolor:name中的api.column("color:name").index()來獲取該列的索引。

使用下面的代碼：

// DataTable 
var table = $('#example').DataTable({ 
    "order": [[3, 'asc']], 
    "columnDefs": [ 
     { targets: 3, name: "group" }, 
     { targets: -1, name: "color" } 
    ], 
    "drawCallback": function (settings){ 
     var api = this.api(); 

     // Zero-based index of the column containing group names 
     var col_name = api.column("group:name").index(); 
     var col_color = api.column("color:name").index(); 

     // If ordered by column containing names 
     if (api.order()[0][0] === col_name) { 
      var rows = api.rows({ page: 'current' }).nodes(); 
      var group_last = null; 

      api.column(col_name, { page: 'current' }).data().each(function (group, index){ 
       if (group_last !== group){       
        var color = api.cell({ 
         row: api.row(rows[index]).index(), 
         column: col_color 
        }).data(); 

        $(rows[index]).before(
         '<tr class="group" style="background-color:' + color + '"><td colspan="5">' + group + '</td></tr>' 
        ); 

        group_last = group; 
       } 
      }); 
     } 
    } 
}); 

DEMO

見this jsFiddle代碼和演示。