如何重置Datatable中的筛选器

Question

我无法使用fnFilter()清除筛选器。

这是我的HTML代码：

<table id="todays _table>

               <thead>
                 <tr id="todays_search_input_feilds">
                     <td class="input_filter">
                        <input type="text" id="type" class="form-control search_events">
                    </td>
                    <td class="input_filter">
                        <input type="text" id="vendor " class="form-control search_events">
                    </td>
                </tr>
            </thead>
    </table> 

这是我的 JQuery 代码

$('#todays_table').dataTable().fnFilter('');
    oTable.fnClearTable();

我尝试了以下方法进行清除：

$('input[class="form-control search_events"]').val('');

但是这样做的问题在于，它清除了值，但数据没有加载到dataTable中。只有当我点击任何一个筛选器时才会加载。

- Onera

Answer 1

重置自定义筛选器

如果您正在使用像这个例子中的自定义过滤函数，则需要在筛选和重新绘制表格之前清除相关控件。

$('input.search_events').val('');
$('#todays_table').dataTable().fnDraw();

重置全局搜索

• jQuery DataTables 1.9+

  调用fnFilter() API方法，将空字符串作为第一个参数来重置全局搜索并重新绘制表格。

  例如：

  $('#example').dataTable().fnFilter('');
  

• jQuery DataTables 1.10

  使用空字符串作为第一个参数调用search() API方法，然后再调用draw() API方法来重置全局搜索并重新绘制表格。

  例如：

$('#example').DataTable().search('').draw();

- Gyrocode.com

---

它正在抛出一个错误。你有其他的解决方案吗？ - Onera

@Onera，您使用的是jQuery DataTables 1.10还是1.9？您在控制台中得到了什么错误？ - Gyrocode.com

我收到了一个错误，说搜索不是一个函数，所以我确定它不是datatables 1.10，我尝试使用你最新的代码-值被清除了，但datatable没有被绘制，在我点击过滤器后它正在加载。 - Onera

如果您正在使用自定义过滤器，您可以使用以下代码一次性重置所有列：$('#yourtable').DataTable().columns().every( function () { this.search('')} );
然后重置全局搜索并重新绘制表格：$('#yourtable').DataTable().search('').draw(); - michaelf

Answer 2

DataTables 1.10+新API可以通过以下链接实现相同的效果，无需使用插件：

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

如果您正在使用早期版本的DataTables，您需要包含称为 fnFilterClear 的插件库并调用：

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

请参阅DataTables API 页面获取更多信息，以及适用于早期版本 DataTable 的插件。

- kalibrain

---

DataTables 1.10+ 的示例无法正常运行。如果您按列排序（例如，第二列降序）然后使用它，它将返回仍然按第二列降序排序的结果，尽管没有任何搜索条款影响结果。我在服务器端模式下使用 DataTables，但看不到任何实现此操作的方法，可以重置在 Ajax 请求中发送的 'sort' 和 'order'（为 ASC，列 0）。 - Andy

从来不知道你可以像这样堆叠它们 table.search('').columns().search('').draw();。这是我唯一有效的情况。 - greendino

Answer 3

如果您正在使用列和正则表达式进行搜索：

$('#example').DataTable().column('').search('').draw();

- Aline Matos

---

column('') 应该改为 columns('')。 $('#example').DataTable().columns('').search('').draw() 是一段代码，意思是在一个表格中搜索空字符串并重新绘制表格。 - Avnish Tiwary

@Avnishalok，正如我所说，答案是针对列和正则表达式的。 - Aline Matos

Answer 4

我正在使用DataTables 1.10.15版本，它的工作原理如下。

        var oTable = $('#example').DataTable();
        $.fn.dataTableExt.afnFiltering.length = 0;
        oTable.draw();

- Chandana

---

这对我有用，但它不会重置筛选器的选择。 - uwe

Answer 5

 <script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.10.9/api/fnFilterClear.js"></script>

  $.extend( $.fn.dataTable.defaults, {
 fnInitComplete: function(oSettings, json) {
   var btnClear = $('#clear_all');
  btnClear.appendTo($('#' + oSettings.sTableId).parents('.dataTables_wrapper').find('.dataTables_filter'));

  $('#clear_all').click(function () {
   $('#' + oSettings.sTableId).dataTable().fnFilterClear();
   $("input.column_filter").val('');

       $.fn.dataTable.ext.search.pop();
  });

 }

});

- akshika gupta

---

包括脚本文件 - akshika gupta

虽然此代码可能回答了问题，但提供有关如何以及/或者为什么解决问题的其他上下文将会提高答案的长期价值。 - Tiago Martins Peres

这里我使用了datatables API fnfilterclear，并调用该API函数来清除过滤器的值，同时清除了我的过滤器输入字段。在这里，clear_all是我的按钮ID，我已经在HTML中初始化了它以清除过滤器。 - akshika gupta

Answer 6

DataTables 1.10+ 新 API

var D_T = $(selector).DataTable();
     D_T.
         search('').
         columns().search('').visible( true, true ).order('asc' ).
         colReorder.reset().
         page.len(10).
         state.clear().
         draw() ;

- xpredo