本文介绍如何通过一行核心代码实现 datatables 中“清除筛选”按钮的功能，使其同时清空全局搜索框内容和所有下拉列筛选器，确保表格恢复到初始未筛选状态。
在使用 DataTables 构建带级联下拉筛选的表格时，常见的需求是提供一个“Clear Filters”按钮，一键还原所有筛选状态——包括全局搜索文本（search()）和各列的独立筛选条件（columns().search()）。默认情况下，DataTables 并不自动绑定此类操作，需手动为按钮注册事件并调用对应 API。
关键实现逻辑如下：
当点击 #test 按钮时，执行两步操作：
- table.search(”)：清空全局搜索输入框的值；
- 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(''); }); // 恢复当前选中项（保持 UI 与筛选状态同步） var currSearch = column.search(); if (currSearch) { var cleanVal = currSearch.replace(/^^|$$/g, ''); // 移除 ^ 和 $ select.val(cleanVal); } }); }⚠️ 注意事项：
- table.columns().search(”) 必须配合 .draw() 才生效，否则仅重置内部状态而不刷新视图；
- 若列筛选使用了正则表达式（如 ‘^value$’），清除时只需传入空字符串即可，无需手动还原正则结构；
- buildSelect() 在每次 draw 后被调用，确保下拉菜单始终与当前数据一致，且能正确回显已清除的筛选状态；
- 如需增强用户体验，可在点击后重置所有
$('#dropdown1, #dropdown2, #dropdown3').find('select').val('');综上，table.search(”).columns().search(”).draw() 是清空 DataTables 全局+列级筛选的最简、最可靠方案，适用于绝大多数自定义筛选场景。