Question

查看此示例http://www.datatables.net/examples/api/multi_filter_select.html，它使用DataTable API中的columns.search（），您将如何清除＆＃39;当用户选择“全部”时，搜索并再次显示所有结果。还是空的第一个选项？

Answer 1

您可以使用空字符串作为搜索字词来清除搜索，而不使用正则表达式匹配。个别列过滤演示在某种程度上有点误导，因为第一个（未命名）选项不是＆＃34; all＆＃34;或者＆＃34;任何＆＃34;，可以相信，但实际上应该被命名为＃34;空＆＃34;或＆＃34; null＆＃34;。如果选择第一个选项，则会执行正则表达式搜索空字符串。我想这个演示是在急速进行的。

修改演示选择第一个选项＆＃34;清除＆＃34;搜索，即全选：

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

修改后的单个列过滤演示 - ＆gt;的 http://jsfiddle.net/CmMfJ/

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

注意块＆＃34; //应用搜索＆＃34;之间的相似之处和函数fnResetAllFilters（）。

Answer 3

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

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

由于DataTables使用change事件来执行过滤，因此您只需触发一个以重新绘制表格。

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正确选择它！

希望它会有所帮助！

Answer 4

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

在明确的事件中这样打电话：

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

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

jQuery dataTables - 清除列上的搜索

4 个答案: