jQuery dataTables - 清除列上的搜索答案

【问题标题】：jQuery dataTables - Clear search on a columnjQuery dataTables - 清除列上的搜索
【发布时间】：2014-06-27 11:05:02
【问题描述】：

看看这个例子，http://www.datatables.net/examples/api/multi_filter_select.html，它使用来自 DataTable API 的 columns.search()，当用户选择“全部”或空的第一个选项时，你将如何“清除”搜索并再次显示所有结果？

【问题讨论】：

标签： datatables filtering jquery-datatables

【解决方案1】：

您通过使用空字符串作为搜索词来清除搜索，没有正则表达式匹配。单个列过滤演示在某种程度上有点误导，因为第一个（未命名的）选项不是“all”或“any”，正如人们可能相信的那样，但实际上应该命名为“empty”或“null”。如果选择第一个选项，则会执行空字符串的正则表达式搜索。我猜这个演示是仓促的。

修改后的演示，选择第一个选项“清除”搜索，即全选：

$("#example tfoot th").each( function ( i ) {
  var select = $('<select><option value="">All</option></select>')
    .appendTo( $(this).empty() )
    .on( 'change', function () {
       var term =  $(this).val()!='' ? '^'+$(this).val()+'$' : '';
       table.column( i )
          .search(term, true, false )
          .draw();
       } );

  table.column( i ).data().unique().sort().each( function ( d, j ) {
    select.append( '<option value="'+d+'">'+d+'</option>' )
  });
});

修改了单列过滤演示 -> http://jsfiddle.net/CmMfJ/

【讨论】：

【解决方案2】：

不确定这在该示例中是否有帮助，但我发现清除单个列搜索文本字段的方法如下：

首先这是我创建字段的方式：

$(document).ready(function(){  
    // Setup - add a text input to each footer cell
    $('#myTable tfoot th').each( function () {
        var title = $('#myTable thead th').eq( $(this).index() ).text();
        $(this).html( '<input id="'+title.replace(/ /g,'')+'_search" type="text" placeholder="'+title+'" />' );
    } );

    oTable = $('#myTable').DataTable({ settings bla bal });

    // Apply the search
    oTable.columns().eq( 0 ).each( function ( colIdx ) {
        $( 'input', oTable.column( colIdx ).footer() ).on( 'keyup change', function () {

            oTable
                .column( colIdx )
                .search( this.value, true )
                .draw();
        } );
    } );
}

这就是我清除它们的方式：

function fnResetAllFilters() {
    // Apply blank string
    oTable.columns().eq( 0 ).each( function ( colIdx ) {
            $( 'input', oTable.column( colIdx ).footer() ).val(''); //clear column visible text
            oTable.columns(colIdx).search( '', true ); //clear dataTable column search filters
        }
    )
    oTable.search( '', true ).draw(); //clears global search filter then finally draw the table, all done..
}

注意块“//应用搜索”和函数 fnResetAllFilters() 之间的相似之处。

【讨论】：

【解决方案3】：

作者给出了一个简单的方法。

在你的清除事件中这样调用：

$('#datatable tfoot input').val('').change();

由于数据表使用事件向服务器发送命令，它也会清除搜索！

【讨论】：

【解决方案4】：

我想出了一个非常简单的方法。

清除文本输入中的所有文本
触发所有文本输入的更改事件

由于 DataTables 使用更改事件来执行过滤，因此您只需触发一个事件即可重绘表格。

function clearAllInputs() {
      // Will reset all input text values to nothing.
      $("input:text").val('');
      // Will trigger a "change" event in order for datatables to refresh the filtering. This is because DataTables uses the change event to perform filtering.
      $("input:text").trigger("change");
    }

这也应该适用于特定的过滤器输入文本。您只需要使用 jquery 正确选择它！

希望它会有所帮助！

【讨论】：