如何使用外部选择框过滤数据表? [英] How to use Select box outside to filter dataTables?

问题描述

我正在使用 DataTables 用于 jQuery 的表格插件，但我遇到了问题获取全局输入搜索框将是一个选择框.

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

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

With the sDOM option 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?

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>

推荐答案

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

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

例如:

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

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

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

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

这篇关于如何使用外部选择框过滤数据表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！