如何使用“选择框”来过滤dataTables？

Question

我正在为DataTables使用jQuery表插件，但是我在获取全局输入搜索框时遇到了困难，这将是一个选择框。

使用sDOM选项lrtip，不显示筛选输入，但是否可以根据复选框的更改显示复选框并使datatable进行筛选？

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();   
});

有关代码和演示，请参见这个例子。如果要替换默认搜索框，请参见这个例子。

Answer 2

有两种方法可以使用自定义字段搜索字符串，因为我在DataTable作用域之外创建了自定义字段，并使用下面的代码使其像搜索框一样工作。

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(); 

1. 我喜欢的第二个解决方案，因为它没有在datatable主搜索字段中显示任何内容，并且结果没有修改搜索字段。 变量selectedValue=$("#month-select").val()；table.columns(6).search( selectedValue ).draw()；

列(6)您可以根据列顺序修改这个数字6。