基於數據屬性的訂單表列

Question

我有一個包含14列的表格，我將其中僅有4個用於示例目的。所有列（理論上的和TD的）有它決定我希望他們的位置，像這樣一個數據排序屬性：

原始的（動態生成的）表看起來像這樣：

<table class="table" role="grid"> 
    <thead> 
     <tr> 
      <th data-order="0">Date</th> 
      <th data-order="3">Clicks</th> 
      <th data-order="1">Delivered</th> 
      <th data-order="2">Opens</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr role="row"> 
      <td data-order="0">...</td> 
      <td data-order="3">...</td> 
      <td data-order="1">...</td> 
      <td data-order="2">...</td> 
     </tr> 
     <tr role="row"> 
      <td data-order="0">...</td> 
      <td data-order="3">...</td> 
      <td data-order="1">...</td> 
      <td data-order="2">...</td> 
     </tr> 
    </tfoot> 
</table> 

而且我想他們是（基於數據階屬性）的順序是：

<table class="table" role="grid"> 
    <thead> 
     <tr> 
      <th data-order="0">Date</th> 
      <th data-order="1">Delivered</th> 
      <th data-order="2">Opens</th> 
      <th data-order="3">Clicks</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr role="row"> 
      <td data-order="0">...</td> 
      <td data-order="1">...</td> 
      <td data-order="2">...</td> 
      <td data-order="3">...</td> 
     </tr> 
     <tr role="row"> 
      <td data-order="0">...</td> 
      <td data-order="1">...</td> 
      <td data-order="2">...</td> 
      <td data-order="3">...</td> 
     </tr> 
    </tfoot> 
</table> 

我使用的是DataTables jQuery Plugin，我看到了column().order()功能和colReorder屬性，但它不爲我工作。我的JavaScript看起來像這樣（只是爲了測試該colReorder工作）：

var table = $('table').DataTable({ 
    paginate: false, 
    info : false, 
    colReorder: { 
     order: [ 0, 2, 3, 1 ] 
    } 
}); 

我還包括colReorder plugin

但是保持原有列的順序。我做錯了什麼？這甚至可能嗎？

Answer 1

很簡單。從每個<th>中獲取data-order值，然後構建所需的order陣列。你甚至可以把它分成由order屬性調用函數：

//build array, order[data-order] = index 
function getOrder() { 
    var ths = $('.table th'); 
    var order = new Array(ths.length); 
    for (var i=0, l=ths.length; i<l; i++) { 
    order[$(ths[i]).data('order')] = i 
    } 
    return order; 
} 

var table = $('.table').DataTable({ 
    colReorder: { 
    order: getOrder() 
    } 
}) 

演示 - >http://jsfiddle.net/Lwdgnx1x/

注意：data-order纔有意義在標題中。無論如何，您不能在行級上進行不同的排序。