使用单个"搜索"按钮和"清除"按钮搜索数据表

Question

我正在实现datatable ajax-grid，在这里我使用bigcommerce API加载数据。我实现了一个逐列搜索框。但问题是它是实时搜索的。我不想要它。我想做的是在最后一列中有一个搜索按钮和一个清除按钮。

现在假设我在产品名称的搜索框中输入了一个关键字，并在SKU中输入了另一个关键字。现在，当我按下搜索按钮时，它应该使用这两个关键字进行搜索。我该怎么做？

这是我的代码

HTML

<table id="example" class="display" style="width:100%"> 
<thead> 
<tr> 
<th>Image</th> 
<th>Product SKU</th> 
<th>Product Name</th> 
<th>Price</th> 
<th>Status</th> 
<th>Actions</th> 
</tr>
</thead> 
<tfoot> 
<tr> 
<th>Image</th> 
<th>Product SKU</th> 
<th>Product Name</th> 
<th>Price</th> 
<th>Status</th> 
<th>Actions</th> 
</tr> 
</tfoot> 
</table>

JS-

$('#example thead tr').clone(true).appendTo( '#example thead' );
$('#example thead tr:eq(1) th').each( function (i) {
var title = $(this).text();
$(this).html( '<input class="no_sort" type="text" />' );                  
$( 'input', this ).on( 'keyup change', function () {
if ( table.column(i).search() !== this.value ) {
table
.column(i)
.search( this.value )
.draw();
}
} );
} );

使用JS，我在表头下面添加了过滤器

我想要什么：https://prnt.sc/pnzygy它目前的样子：https://prnt.sc/pnzz98

Answer 1

Var table=$('#example'(。DataTable((；

table.column(2(.search("sku"(.draw((；table.column(3(.search("产品名称"(.draw((；