は、DataTableの

Question

で行をフィルタリング私は現在正しく動作jQueryのプラグインのDataTableを持っていると私はさらにリストをフィルタリングするには、ページの上部にあるボタンを挿入しました。 （私はDataTablesに組み込まれた検索バーも使用しています）。私は、ボタンをテーブルをフィルタリングし、特定の値を含む行のみを表示したい。以下はiveがやっていることですが、何も動作していないようです..下の例では、リストをフィルタリングしようとしています要素 '犬'は、 '動物'列内誰もがこれを修正する方法を知っていますか？

おかげ

$("#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>に行が必要になります - あなたのフィルタ行が1行であることを確認して、あなたの実際のヘッダ第二列である

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()); 
     } 
    }); 
} 

このうち10