web-dev-qa-db-ja.com

外側の選択ボックスを使用してdataTablesをフィルタリングする方法

DataTables jQueryのテーブルプラグインを使用していますが、グローバル入力検索ボックスが選択ボックスになるのに問題があります。

sDOM オプションlrtipを使用すると、入力のフィルタリングは表示されませんが、選択ボックスを表示し、選択ボックスの変更に基づいてデータテーブルをフィルタリングできますか？

JS：

$(document).ready(function() {
    var table = $('#table_page').DataTable( {
        paging:   true,
        ordering: false,        
        info:     true,
        searching: true, 
        sDom: "lrtip" // default is lfrtip, where the f is the filter
    });
});

HTML：

<table id="table_page" class="display cell-border" width="100%">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
</table>
jquerysearchdrop-down-menudatatablesfiltering
6
LeMoussel

search() APIメソッドを使用してプログラムでグローバル検索を実行し、 dom オプションを使用して組み込みの検索コントロールを無効にすることができます。

例えば：

var table = $('#example').DataTable({
   dom: 'lrtip'
});

$('#table-filter').on('change', function(){
   table.search(this.value).draw();   
});

コードとデモについては この例 を参照してください。デフォルトの検索ボックスを置き換える場合は、 この例 を参照してください。

14
Gyrocode.com