如何为 DataTables 的重置按钮添加清空筛选功能

本文介绍如何通过一行核心代码实现 datatables 中“清除筛选”按钮的功能，使其同时清空全局搜索框内容和所有下拉列筛选器，确保表格恢复到初始未筛选状态。

在使用 DataTables 构建带级联下拉筛选的表格时，常见的需求是提供一个“Clear Filters”按钮，一键还原所有筛选状态——包括全局搜索文本（search()）和各列的独立筛选条件（columns().search()）。默认情况下，DataTables 并不自动绑定此类操作，需手动为按钮注册事件并调用对应 API。

关键实现逻辑如下：
当点击 #test 按钮时，执行两步操作：

1. table.search('')：清空全局搜索输入框的值；
2. table.columns().search('').draw()：遍历所有列，清除每列的自定义搜索条件（如正则匹配 ^value$），然后强制重绘表格。

完整可运行代码如下（已整合原示例逻辑）：

$(document).ready(function() {
  var table = $('#example').DataTable({
    responsive: true,
    searching: true
  });

  buildSelect(table);

  table.on('draw', function() {
    buildSelect(table);
  });

  // ✅ 绑定清除筛选按钮
  $('#test').on('click', function() {
    table.search('').columns().search('').draw();
  });
});

function buildSelect(table) {
  var counter = 0;
  table.columns([0, 1, 2]).every(function() {
    var column = table.column(this, { search: 'applied' });
    counter++;
    var select = $('')
      .appendTo($('#dropdown' + counter).empty())
      .on('change', function() {
        var val = $.fn.dataTable.util.escapeRegex($(this).val());
        column
          .search(val ? '^' + val + '$' : '', true, false)
          .draw();
      });

    column.data().unique().sort().each(function(d) {
      select.append('' + d + '');
    });

    // 恢复当前选中项（保持 UI 与筛选状态同步）
    var currSearch = column.search();
    if (currSearch) {
      var cleanVal = currSearch.replace(/^\^|\$$/g, ''); // 移除 ^ 和 $
      select.val(cleanVal);
    }
  });
}

⚠️ 注意事项：

松果AI写作

专业全能的高效AI写作工具

下载

• table.columns().search('') 必须配合 .draw() 才生效，否则仅重置内部状态而不刷新视图；
• 若列筛选使用了正则表达式（如 '^value$'），清除时只需传入空字符串即可，无需手动还原正则结构；
• buildSelect() 在每次 draw 后被调用，确保下拉菜单始终与当前数据一致，且能正确回显已清除的筛选状态；
• 如需增强用户体验，可在点击后重置所有 的 selectedIndex 为 0，避免视觉残留（可选）：

$('#dropdown1, #dropdown2, #dropdown3').find('select').val('');

综上，table.search('').columns().search('').draw() 是清空 DataTables 全局+列级筛选的最简、最可靠方案，适用于绝大多数自定义筛选场景。