将持久过滤器应用于 table 排序器 table

Question

我想将持久过滤器应用于 table分拣机 table。

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

下面演示一个尝试。虽然它看起来有效，但当过滤器变得不那么严格时，隐藏的行就会变得可见。（例如，选中此框，在 "B" 列的过滤器中输入 "B1"，然后删除“1”。）

$(function() {
   var $table = $('#table').tablesorter({
      theme: 'blue',
      widgets: [ "zebra", "filter" ],
      widgetOptions : {
      },
   });

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

tr.spoiler td { color: rgba(0, 0, 0, 0.1) }

<link rel="stylesheet" type="text/css" href="https://mottie.github.io/tablesorter/dist/css/theme.blue.css">

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://mottie.github.io/tablesorter/dist/js/jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="https://mottie.github.io/tablesorter/dist/js//jquery.tablesorter.widgets.min.js"></script>

<p><label for="hide_spoilers">Hide Spoilers</label><input id="hide_spoilers" type="checkbox"></p>

<table id="table">
   <thead>
      <tr><th>A</th><th>B</th><th>C</th></tr>
   </thead>
   <tbody>
      <tr><td>A1</td><td>B1</td><td>C1</td></tr>
      <tr><td>A2</td><td>B2</td><td>C2</td></tr>
      <tr class="spoiler"><td>A3</td><td>B3</td><td>C3</td></tr>
      <tr><td>A4</td><td>B4</td><td>C4</td></tr>
   </tbody>
</table>

我也尝试将 filtered class 添加到行中，但这也不起作用也就不足为奇了。

这可以使用隐藏列来完成，但这可能会干扰其他功能（例如 filter_reset）。有原生方法吗？

Answer 1

css 剧透行需要提高特异性：

我修改了以下内容（demo）：

HTML

<input id="hide_spoilers" type="checkbox" checked>
...
<tr class="spoiler hide"><td>A3</td><td>B3</td><td>C3</td></tr>

CSS

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

JS

$('#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');
   }
});

将持久过滤器应用于 table 排序器 table

Applying a persistent filter to a tablesorter table

javascript

jquery

tablesorter