jqueryでの動的ソートDataTables

columns.renderオプション付きのDataTablesを使用して、テーブルのカスタムソートを実装しています。ソート関数内のロジックが静的データにのみ依存する場合はうまく動作します。しかし、私は制御しているユーザーにいくつかのコントロールを提供したいと思っていますどのように並べ替えが発生する必要があります。問題は、DataTablesが最初の並べ替え結果をキャッシュしているように見えるため、ユーザーが並べ替えコントロールを変更しようとしたときに効果がないことです。jqueryでの動的ソートDataTables

つまり、私は動的ソート機能を持っていたいと思います。

明らかに、これは例で最もよく説明されています。アイデアは、ユーザーがテーブルの上のラジオで選択した内容に応じて、「情報」列を「顧客名」または「価格」のいずれかでソートできるようにすることです。それを実行すると、並べ替えは最初のラジオ選択に対してのみ機能することがわかります。

$(function() { 
 
    var opts = { 
 
     "columns": [{ 
 
      'searchable': false 
 
     }, { 
 
      'render': function(data, type, row, meta) { 
 
       if (type === 'sort') { 
 
        var sel = $("input[name=infoFilterOptions]:checked").val(); 
 
        return $(sel, $(data)).data('value'); 
 
       } 
 
       return data; 
 
      } 
 
     }] 
 
    }; 
 
    $("#the_table").DataTable(opts); 
 
});

<html> 
 

 
<head> 
 
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script> 
 
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.css" /> 
 
    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div style="color:green; margin-bottom: 10px;"> 
 
    <div style="display: inline-block; margin-right: 10px;">Sort <i>Info</i> column by:</div> 
 
    <label class="radio-inline"> 
 
     <input style="margin-top: 0;" type="radio" name="infoFilterOptions" value=".info-price" checked>Price 
 
    </label> 
 
    <label class="radio-inline"> 
 
     <input style="margin-top: 0;" type="radio" name="infoFilterOptions" value=".info-customer-name">Customer name 
 
    </label> 
 
    </div> 
 
    <table id="the_table" class="stripe"> 
 
    <thead> 
 
     <tr> 
 
     <th>Id</th> 
 
     <th>Info</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td>1</td> 
 
     <td> 
 
      <div>Customer name: <span class="info-customer-name" data-value="John">John</span> 
 
      </div> 
 
      <div>Price: <span class="info-price" data-value="42.42">$42.42</span> 
 
      </div> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td>3</td> 
 
     <td> 
 
      <div>Customer name: <span class="info-customer-name" data-value="Melvyn">Melvyn</span> 
 
      </div> 
 
      <div>Price: <span class="info-price" data-value="14.0">$14.00</span> 
 
      </div> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td>18</td> 
 
     <td> 
 
      <div>Customer name: <span class="info-customer-name" data-value="Aaaaardvark">Aaaaardvark</span> 
 
      </div> 
 
      <div>Price: <span class="info-price" data-value="22.3">$22.30</span> 
 
      </div> 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</body> 
 

 
</html>

出典

2016-09-16 mgalgs

アランはon the DataTables forumsの上にこの質問に答えました。いつものようにファーストクラスサポート！

短い答えは、DataTables はです。実際にはソート結果をキャッシュしています。並べ替え順序を再計算するには、テーブル内のデータを無効化する必要があります（row().invalidate()またはrows().invalidate()経由）。

これはトリックん：

$('input[type=radio][name=infoFilterOptions]').on('change', function() { 
    $("#the_table").DataTable().rows().invalidate(); 
});

は、ここでは、この修正を含む上記からの完全な例です：

$(function() { 
 
    var opts = { 
 
     "columns": [{ 
 
      'searchable': false 
 
     }, { 
 
      'render': function(data, type, row, meta) { 
 
       if (type === 'sort') { 
 
        var sel = $("input[name=infoFilterOptions]:checked").val(); 
 
        return $(sel, $(data)).data('value'); 
 
       } 
 
       return data; 
 
      } 
 
     }] 
 
    }; 
 
    $("#the_table").DataTable(opts); 
 

 
    $('input[type=radio][name=infoFilterOptions]').on('change', function() { 
 
     $("#the_table").DataTable().rows().invalidate(); 
 
    }); 
 
});

<html> 
 

 
<head> 
 
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script> 
 
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.css" /> 
 
    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div style="color:green; margin-bottom: 10px;"> 
 
    <div style="display: inline-block; margin-right: 10px;">Sort <i>Info</i> column by:</div> 
 
    <label class="radio-inline"> 
 
     <input style="margin-top: 0;" type="radio" name="infoFilterOptions" value=".info-price" checked>Price 
 
    </label> 
 
    <label class="radio-inline"> 
 
     <input style="margin-top: 0;" type="radio" name="infoFilterOptions" value=".info-customer-name">Customer name 
 
    </label> 
 
    </div> 
 
    <table id="the_table" class="stripe"> 
 
    <thead> 
 
     <tr> 
 
     <th>Id</th> 
 
     <th>Info</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td>1</td> 
 
     <td> 
 
      <div>Customer name: <span class="info-customer-name" data-value="John">John</span> 
 
      </div> 
 
      <div>Price: <span class="info-price" data-value="42.42">$42.42</span> 
 
      </div> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td>3</td> 
 
     <td> 
 
      <div>Customer name: <span class="info-customer-name" data-value="Melvyn">Melvyn</span> 
 
      </div> 
 
      <div>Price: <span class="info-price" data-value="14.0">$14.00</span> 
 
      </div> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td>18</td> 
 
     <td> 
 
      <div>Customer name: <span class="info-customer-name" data-value="Aaaaardvark">Aaaaardvark</span> 
 
      </div> 
 
      <div>Price: <span class="info-price" data-value="22.3">$22.30</span> 
 
      </div> 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</body> 
 

 
</html>

出典

2016-09-18 00:39:16 mgalgs

jqueryでの動的ソートDataTables

答えて

関連する問題