DataTablesの列をフィルタリングする属性値に基づくボタン

Question

私は自分のDataTablesの上にカスタムボタンを持っています。この列のセルには画像（国/地域のフラグ）しか含まれていないので、このボタンを押すと属性値の最初の列をフィルタリングします。

私のテーブルには、次のようになります。

<table id="example"> 
    <thead> 
     <tr> 
      <th>Region</th> 
      <th>First name</th> 
      <th>Last name</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td data-order="United States"><img src="img/region_usa.png"></td> 
      <td>George</td> 
      <td>Washington</td> 
     </tr> 
     <tr> 
      <td data-order="Europe"><img src="img/region_eur.png"></td> 
      <td>Michael</td> 
      <td>Ferguson</td> 
     </tr> 
     <tr> 
      <td data-order="Japan"><img src="img/region_jap.png"></td> 
      <td>Yuka</td> 
      <td>Sakamari</td> 
     </tr> 
    </tbody> 
</table> 

これは私のinitilizationです：

$('#example').DataTable({ 
    buttons: [ 
     { 
      text: "Filter: USA", 
      action: function(e, dt, node, config){ 
       dt.column(0).search("United States").draw(); 
      } 
     } 
    ] 
}) 

しかし、これは残念ながら何もしません。私は間違って何をしていますか？

参考として、Buttons collection,Buttons.actionおよびcolumn.search()を使用しました。

Answer 1

輸入datatTables.buttons.js

<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.1/js/dataTables.buttons.min.js"></script> 

変更あなたのattr data-searchによってdata-order（チェックHTML5 attrのhttps://datatables.net/examples/advanced_init/html5-data-attributes.html）

... 
<td data-search="United States"><img src="img/region_usa.png"></td> 
... 

覚えてdomを示しています。

$(document).ready(function() { 

$('#example').DataTable({ 
    dom: 'Bfrtip', 
    buttons: [ 
    { 
     text: "Filter: United States", 
     action: function(e, dt, node, config){ 
      dt.column(0).search("United States").draw(); 
     } 
    } 
    ] 
}) 

}); 

結果：https://jsfiddle.net/cmedina/7kfmyw6x/63/