TableSorterJS如何实现切换重置/重新应用默认筛选条件？

要实现按钮在「清除筛选」和「恢复默认筛选」之间切换，核心是给按钮添加状态标记，根据当前状态执行对应操作：

1. 给按钮添加状态追踪
   在按钮元素上添加data-filter-state属性，初始值设为"default"（页面加载后默认是已应用筛选的状态）：

   <button class="filter-toggle-btn" data-filter-state="default">切换筛选</button>
   

2. 修改点击事件逻辑
   替换你原来的按钮点击代码，通过状态判断执行不同操作：

   $('.filter-toggle-btn').on('click', function() {
     const $btn = $(this);
     const $table = $('table'); // 替换为你的表格实际选择器
     const currentState = $btn.data('filter-state');
   
     if (currentState === 'default') {
       // 清除所有筛选条件：清空筛选输入框并触发搜索
       $table.find('.tablesorter-filter').val('');
       $table.trigger('search');
       // 更新状态并切换样式
       $btn.data('filter-state', 'cleared');
       $btn.addClass('toggled');
     } else {
       // 恢复默认筛选：触发filterReset回到初始设置，再重启排序
       $table.trigger('filterReset');
       $table.trigger('sortRestart');
       // 更新状态并移除样式
       $btn.data('filter-state', 'default');
       $btn.removeClass('toggled');
     }
   });
   

关键说明 #

• 清除筛选时不能用filterReset，因为该方法会直接恢复到默认筛选条件，我们需要手动清空所有筛选输入框后触发搜索，才能得到无筛选的状态。
• 通过data-filter-state记录当前状态，确保点击行为在两种状态间切换。

内容的提问来源于stack exchange，提问作者Robert Sullivan