时间戳

首页 > 解决方案 > 使用单个搜索按钮和清除按钮搜索数据表

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

问题描述

我正在实现数据表 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

标签： javascriptjquerydatatable

解决方案

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

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

推荐阅读