Фильтрация строк в DataTables

Question

В настоящее время я правильно использую DataTables плагина JQuery, и я вставлял кнопку в верхней части страницы для дальнейшего фильтрации списка. (Я также использовал панель поиска, встроенную в DataTables). Я хочу, чтобы кнопка отфильтровывала таблицу и отображала только строки, которые содержат определенное значение. Ниже показано, что я делаю, но ничего не работает. В приведенном ниже примере я пытаюсь отфильтровать список для всех строк, которые содержат элемент «Собака» в столбце «Животные» Кто-нибудь знает, как это исправить?

Благодаря

$("#NewButton").click(function() { 
    $.fn.dataTable.ext.search.pop(); 
     table.draw(); 
    $.fn.dataTable.ext.search.push(
     function(settings, data, dataIndex) { 
      return $(table.row(dataIndex).node()).attr(Animal) == "Dog"; 
     } 
    ); 
    table.draw(); 
    }); 

    $("#Default").click(function() { 
    $.fn.dataTable.ext.search.pop(); 
    table.draw(); 
    }); 

Answer 1

Вот пример из моего кода - это с помощью <input> и <select>, но вы должны быть в состоянии адаптировать его очень легко, если вы пытаетесь сделать что-то по-другому.

В примере, представленном на datatables.net, они делают это с полями поиска в нижнем колонтитуле (что мне лично не нравится), поэтому мой пример с ними в заголовке. Для начала, вам нужно два строки в вашем <thead> - убедитесь, что ваш фильтр строка является первой строкой, и фактические заголовки является второй ряд

Working DEMO

<table class="table"> 
    <thead> 
    <tr class="filter-row"> 
     <th class="actions"> 
     </th> 
     <th class="searchable datatables-dropdown"> 
     <select name="FormName"> 
      <option>Form1</option> 
      <option>Form2</option> 
     </select> 
     </th> 
     <th class="display-order"> 
     </th> 
     <th class="searchable"> 
     Label Text 
     </th> 
     <th class="searchable"> 
     View Roles 
     </th> 
     <th class="searchable"> 
     Edit Roles 
     </th> 
     <th class="searchable"> 
     Delete Roles 
     </th> 
     <th class="searchable"> 
     Add Roles 
     </th> 
     <th class="searchable"> 
     Field Type 
     </th> 
     <th class="searchable"> 
     Note Field 
     </th> 
     <th class="searchable"> 
     Note Required 
     </th> 
     <th class="searchable"> 
     Default 
     </th> 
     <th class="searchable"> 
     Reason List Group 
     </th> 
     <th class="searchable"> 
     Reason Required 
     </th> 
    </tr> 
    <tr> 
     <th class="actions"> 
     Actions 
     </th> 
     <th> 
     Form Name 
     </th> 
     <th> 
     Display Order 
     </th> 
     <th> 
     Label Text 
     </th> 
     <th> 
     View Roles 
     </th> 
     <th> 
     Edit Roles 
     </th> 
     <th> 
     Delete Roles 
     </th> 
     <th> 
     Add Roles 
     </th> 
     <th> 
     Field Type 
     </th> 
     <th> 
     Note Field 
     </th> 
     <th> 
     Note Required 
     </th> 
     <th> 
     Note Default 
     </th> 
     <th> 
     Reason List Group 
     </th> 
     <th> 
     Reason Required 
     </th> 
    </tr> 
    </thead> 
    <tfoot> 

    </tfoot> 
    <tbody> 

    </tbody> 
</table> 

Тогда , в вашем JavaScript вы можете преобразовать строки фильтров из обычного текста в элементы <input>:

$(function() { 
    // First -- Convert plain text to search field inputs 
    $('.table thead tr:first th.searchable:not(.datatables-dropdown)').each(function() { 
     var title = $(this).text().trim(); 
     $(this).css({ "padding": "5px" }); 
     $(this).html('<input type="text" placeholder="Search ' + title + '" style="width: 115px;" />'); 
    }); 

    // Then -- initialize DataTable 
    var table = $(".table").DataTable({ 
     // ... Initialization options 
    }); 

    // Lastly -- call function for wiring up the search fields to the table passed in 
    ApplySearchFieldsToDatatable(table); 
}); 

function ApplySearchFieldsToDatatable (table) { 
    // https://datatables.net/examples/api/multi_filter.html 
    table.columns().every(function() { 
     var column = this, 
     header = $(column.header()), // returns LAST <tr> in <thead> 

     // we need to also grab the first <tr> in <thead> because that is where the search boxes are 
     searchHeader = header.parent().prev(), 

     // Get the corrisponding <th> in the first <tr> (the filter row) 
     currentColumn = searchHeader.children(":eq(" + header.index() + ")"); 

     // Unbind existing event listeners on old column position 
     $('select', currentColumn).off("change"); 
     $('input', currentColumn).off("input").off("propertychange"); 

     // Add new event listeners for new column position 
     $('select', currentColumn).on('change', function() { 
      if (column.search() !== this.value) { 
       column.search(this.value).draw(); 
      } 
     }); 
     $('input', currentColumn).on('input propertychange', function() { 
      if (column.search() !== this.value) { 
       column.search(this.value).draw(); 
      } 
     }); 

     // Need to set the value of the inputs/selects to the search value saved by "stateSave: true" 
     // This is needed on page reload when the search state gets saved, but the inputs get redrawn 
     // from scratch. They do not inherently retain their value, so the data in the table does not 
     // match the values in the search fields. 
     if (column.search().length) { 
      currentColumn.find('input').val(column.search()); 
      currentColumn.find('select').val(column.search()); 
     } 
    }); 
}