Фильтровать столбцы с помощью DataTables Кнопки на основе значения атрибута

Question

У меня есть пользовательская кнопка над моими таблицами. При нажатии я хочу, чтобы он отфильтровывал первый столбец по значению атрибута, поскольку эти ячейки столбца содержат только изображения (флаги стран/регионов).

Моя таблица выглядит следующим образом:

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

изменить ваш атр data-order по data-search (проверить HTML5 атр 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/