Javascript 将持久筛选器应用于tablesorter表

我想对tablesorter表应用一个持久过滤器

我的意思是，除了用户看到的过滤器之外，我还想应用一个过滤器。换句话说，就tablesorter而言，我想让某些行消失，但我不能完全删除它们，因为我需要能够在以后重新添加它们

下面演示了一种尝试。虽然它似乎可以工作，但当过滤器限制性降低时，隐藏行将变得可见。（例如，选中该框，在“B”列的过滤器中输入“B1”，然后删除“1”。）

$（函数（）{
变量$table=$（'#table'）。tablesorter({
主题:"蓝色",，
小部件：[“斑马”，“过滤器”]，
widgetOptions：{
},
});
$（'hide#u sporters'）。更改（函数（）{
如果（选中此项）{
$table.find（“tr.spoiler”）.hide（）；
$table.trigger（'applyWidgetId'，'zebra'）；
}否则{
$table.find（“tr.spoiler”）.show（）；
//然后在这里刷新搜索。
$table.trigger（'applyWidgetId'，'zebra'）；
}
});
});
tr.td{color:rgba（0,0,0,0.1）}

藏破坏者

基础知识
A1B1C1
A2B2C2
A3B3C3
A4B4C4
扰流板排上的css特性需要增加：

我修改了以下内容（）：

HTML

JS

完美的我甚至不想刷新搜索结果。讽刺的是，在我的实际用例中，它是一个select而不是一个复选框，select的其他值添加类。（
css_class='spoiler-'+value；$（'.spoiler'）.addClass（css_class）；
）
<input id="hide_spoilers" type="checkbox" checked>
...
<tr class="spoiler hide"><td>A3</td><td>B3</td><td>C3</td></tr>

tr.spoiler td { color: rgba(0, 0, 0, 0.1) }
tr.spoiler.hide { display: none; }

$('#hide_spoilers').change(function(){
   if (this.checked) {
      $table.find("tr.spoiler").addClass('hide');
      $table.trigger('applyWidgetId', 'zebra');
   } else {
      $table.find("tr.spoiler").removeClass('hide');
      // And somehow refresh the search here.
      $table.trigger('applyWidgetId', 'zebra');
   }
});