javascript - 自定义 "searching"数据表Jquery

Question

我想修改 DataTable jquery 的搜索属性:

在此示例中:https://datatables.net/examples/api/multi_filter.htmlDataTable 底部有几个输入文本字段，每个字段都是相应列的过滤器。

我想要实现的是从数据表中取出这些输入文本字段，因为我想使用其他布局使用这些输入文本字段构建自己的表单。 (我希望利用“搜索”属性的快速响应为我的表单提供更多活力)

我认为示例中的这部分代码:

$('#example tfoot th').each( function () {
    var title = $(this).text();
    $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );

可以在网页的其他地方替换我自己的简单 HTML 输入文本字段:

<input type="text" placeholder="Search " class="test" />
<input type="text" placeholder="Search " class="test" />
<input type="text" placeholder="Search " class="test" />
<input type="text" placeholder="Search " class="test" />
<input type="text" placeholder="Search " class="test" />
<input type="text" placeholder="Search " class="test" />
<input type="text" placeholder="Search " class="test" />
<input type="text" placeholder="Search " class="test" />
<input type="text" placeholder="Search " class="test" />
<input type="text" placeholder="Search " class="test" />

但是，我不知道如何修改这部分代码

    table.columns().every( function () {
        var that = this;

        $( 'input', this.footer() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        } );
    } );

我尝试使用自己的输入文本字段，因此我替换了该行:

$( 'input', this.footer() ).on( 'keyup change', function () {

作者:

$( 'input.test').on( 'keyup change', function () { alert('inside')

在对我自己的输入文本字段进行一些测试并使用警报语句进行调试之后，我意识到这个函数执行的次数与存在的输入文本字段的次数一样多，因为它们都有“test”类。但是，无论如何，“搜索”属性在此输入文本字段中不起作用。

您能给我一些有关修改此数据表以实现我的目标的适当方法的提示吗？

Answer 1

您可以将输入连接到特定列。也就是说，它只会过滤您指定的列

HTML:

<input id="column_3_search" type="text" placeholder="Search " class="test" />

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

$('#column_3_search').on( 'keyup', function () {
    table
        .columns( 3 )
        .search( this.value )
        .draw();
} );

这将允许在输入中键入的文本仅根据第 3 列中的值过滤表格。