Question

我想从DataTable jquery修改搜索属性：

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

我想要实现的是从DataTable中取出那些输入文本字段，因为我想使用其他布局使用这些输入文本字段构建自己的表单。（我希望利用“搜索”属性的快速反应，为我的形式提供更多动力）

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

$('#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')

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

您能否提供有关修改此DataTable以实现目标的适当方式的提示？

Answer 1

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

HTML：

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

JS： var table = $（＆＃39; #example＆＃39;）。DataTable（）;

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

这将允许您input中输入的文字仅根据第3列中的值过滤您的表格。

自定义“搜索”DataTable Jquery

1 个答案: