Применение постоянного фильтра к таблице сортировщика - PullRequest
Новая
       7

Применение постоянного фильтра к таблице сортировщика

0 голосов
/ 25 сентября 2018

Я хотел бы применить постоянный фильтр к таблице сортировщика таблиц.

Под этим я подразумеваю, что я хотел бы применить фильтр в дополнение к фильтрам, видимым пользователем.Другими словами, я хочу, чтобы некоторые строки исчезли в том, что касается таблиц сортировки, но я не могу полностью удалить их, поскольку мне нужно иметь возможность добавить их позже.

Следующее демонстрирует попытку,Пока он работает, скрытые строки становятся видимыми, когда фильтр становится менее строгим.(Например, установите флажок, введите «B1» в фильтре для столбца «B», затем удалите «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).Есть ли родной способ?

1 Ответ

0 голосов
/ 25 сентября 2018

Специфичность 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');
   }
});
...