jQuery 如何使用外部选择框过滤数据表?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/40263248/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 17:14:52  来源:igfitidea点击:

How to use Select box outside to filter dataTables?

jquerysearchdrop-down-menudatatablesfiltering

提问by LeMoussel

I'm using the DataTablesTable plug-in for jQuery but I'm having trouble getting the global input search box would be an select box.

我正在使用jQuery的DataTablesTable 插件,但我无法将全局输入搜索框设为选择框。

With the sDOMoption lrtip, filtering input is not show but is it possible to display select box and getting the datatable to filter based on the change of the select box?

使用sDOM选项lrtip,不显示过滤输入,但是否可以显示选择框并根据选择框的更改获取数据表进行过滤?

JS:

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:

HTML:

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

回答by Gyrocode.com

You can use search()API method to perform global search programmatically and domoption to disable built-in search control.

您可以使用search()API 方法以编程方式执行全局搜索以及dom禁用内置搜索控制的选项。

For example:

例如:

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

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

See this examplefor code and demonstration. See this example, if you want to replace default search box.

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