jQuery数据表格 - 清除某一列的搜索结果

Question

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

- greenafrican

Answer 1

您可以使用空字符串作为搜索条件来清除搜索结果，不需要正则表达式匹配。个别列过滤演示有点误导人，因为第一个（未命名）选项并非“全部”或“任何”，如人们所信的那样，而实际上应该被命名为“空”或“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/

- davidkonrad

Answer 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..
}

注意 "//Apply the search" 代码块和函数 fnResetAllFilters() 之间的相似之处。

- Logic1

Answer 3

作者提供了一种简单的方法。

只需在您的清除事件中这样调用：

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

作为datatables使用事件向服务器发送命令，它也会清除搜索！

- Daniel Soares

Answer 4

我想到了一种非常简单的方法。

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

由于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正确选择它即可！

希望能有所帮助！

- trox