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

Posted 2023-03-10

【中文标题】如何使用外部选择框过滤数据表？

【英文标题】：How to use Select box outside to filter dataTables?

【发布时间】：2017-03-08 21:02:53

【问题描述】：

我正在为 jQuery 使用 DataTables Table 插件，但我遇到了问题 获取全局输入搜索框将是一个选择框。

使用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" >
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
</table>

【问题讨论】：

你见过Individual column searching (select inputs) example吗？

是的，但我想要全局搜索而不是单个列搜索。

看起来你的答案在这里：***.com/questions/12199759/…

不，这是一种使用自定义过滤器功能以编程方式过滤数据表的解决方案，而不是使用选择框作为全局搜索。

【参考方案1】：

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

例如：

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

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

有关代码和演示，请参阅this example。如果要替换默认搜索框，请参阅this example。

【讨论】：

好的，但是您认为是否可以在“显示条目”的同一行中设置选择框（例如带有 sDom 'lfrtip' 选项的输入搜索框）

@Gyrocode.com 哇！更新您的答案，以便我接受。谢谢你的帮助，干杯。

@LeMoussel，更新了答案。最后一个示例中还有一个错字已更正，请参阅jsfiddle.net/zmoos6tu/3

【参考方案2】：

当我在 DataTable 范围之外创建自定义字段 Month's 并使用下面的代码使其像搜索框一样工作时，有两个可以使用您的自定义字段搜索字符串。

1.第一个解决方案，一旦你点击下拉搜索框将填充你选择的内容并填充结果，但你总是可以看到带有所选值的搜索框。

html：

<select name="month-select" id="month-select" class="monthlist" onclick="">
                <option value="">Month's</option>
                <option value="<?php echo date('Y');?>-01">Jan</option>
                <option value="<?php echo date('Y');?>-02">Feb</option>
                <option value="<?php echo date('Y');?>-03">Mar</option>
                <option value="<?php echo date('Y');?>-04">Apr</option>
                <option value="<?php echo date('Y');?>-05">May</option>
                <option value="<?php echo date('Y');?>-06">Jun</option>
                <option value="<?php echo date('Y');?>-07">Jul</option>
                <option value="<?php echo date('Y');?>-08">Aug</option>
                <option value="<?php echo date('Y');?>-09">Sep</option>
                <option value="<?php echo date('Y');?>-10">Oct</option>
                <option value="<?php echo date('Y');?>-11">Nov</option>
                <option value="<?php echo date('Y');?>-12">Dec</option>
                </select>

javascript 代码：

var selectedValue=$("#month-select").val();    
table.search(selectedValue).draw(); 

我喜欢的第二种解决方案，因为它没有在数据表主搜索字段中显示任何内容，并且结果没有修改搜索字段

var selectedValue=$("#month-select").val();
 table.columns(6).search( selectedValue ).draw();

columns(6)您可以根据您的列顺序修改此数字 6。