自定义"搜索";DataTable Jquery

Question

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

在本例中：https://datatables.net/examples/api/multi_filter.htmlDataTable的底部有几个输入文本字段，每个字段都是对应列的筛选器。

我想实现的是从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')

在对我自己的输入文本字段进行了一些测试并用alerts语句进行了调试之后，我意识到这个函数的执行次数是现有输入文本字段的多少倍，因为它们都有"test"类。但是，无论如何，"searching"属性在这个输入文本字段中都不起作用。

你能给我一些关于修改这个数据表以实现我的目标的正确方法的提示吗？

Answer 1

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

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

这将允许在input中键入的文本仅根据第3列中的值筛选表。