データ属性に基づいてテーブルの列を並べ替えます

Question

私は14列のテーブルを持っています。

元（動的に生成された）テーブル次のようになります：これは以下のようにすべての列（第年代とTDのは）、私は彼らがなりたい位置を決定するデータ-order属性を持っている

<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> 

そして、私は彼らが（データ-order属性に基づいて）になりたい順序は次のとおりです。

<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プロパティを見ましたが、それは私のために動作しません。 。私もcolReorder plugin

が含ましかし、それは、元の列の順序を保持します

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

：私のJavaScriptは、この（ちょうどcolReorderが動作していることをテストする）のように見えます。何が間違っているのですか？それも可能ですか？

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はヘッダのみで意味があります。とにかく行レベルで異なる順序を持つことはできません。