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

我正在实现datatableajax网格，其中使用bigcommerceapi加载数据。我实现了一个按列搜索框。但问题是它可以实时搜索。我不想要它。我想做的是在最后一列中有一个搜索按钮和一个清除按钮

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

这是我的密码

HTML

形象
产品SKU
品名
价格
地位
行动
形象
产品SKU
品名
价格
地位
行动

JS

$（'example thead tr'）.clone（true）.appendTo（'example thead'）；
$（'#示例thead tr:eq（1）th'）。每个（函数（i）{
var title=$（this.text（）；
$（this.html（“”）；
$（'input'，this）.on（'keyup change'，函数（）{
if（table.column（i）.search（）！==this.value）{
桌子
.第（i）栏
.search（this.value）
.draw（）；
}
} );
} );

使用JS，我将在表标题下方添加过滤器

我想要的是： 它当前的样子：

Var table=$（“#示例”）.DataTable（）

表.第（2）列.搜索（“sku”）.draw（）； 表.第（3）列.搜索（“产品名称”）.draw（）

<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>

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