如何使用外部选择框来过滤dataTables？

Question

我正在使用DataTables Table插件用于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>

Answer 1

您可以使用search()API方法以编程方式执行全局搜索,并使用dom选项禁用内置搜索控件.

例如:

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

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

有关代码和演示,请参阅此示例.如果要替换默认搜索框,请参阅此示例.