Question

我想将持久性过滤器应用于表排序器表。

通过这个，我的意思是除了用户看到的过滤器之外，我还想应用过滤器。换句话说，就表排序器而言，我想使某些行消失，但是我不能彻底删除它们，因为我以后需要重新添加它们。

以下内容演示了一种尝试。虽然看起来可行，但是当过滤器的限制变得不那么严格时，隐藏的行将变得可见。（例如，选中该框，在过滤器中为“ 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类添加到行中，但这不足为奇也不足为奇。

可以使用隐藏列来完成此操作，但这可能会与其他功能（例如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');
   }
});

将持久性过滤器应用于表排序器表

1 个答案: