Question

我正在使用@ Mottie优秀的Tablesorter派对，并希望能够使用外部链接过滤表列。

这不是绝对必要的，但我想多次点击以打开和关闭过滤器。或者，我总是可以添加一个所有记录链接来重置列。
我不需要在单个列中组合过滤器。换句话说，数据不会是1月和10月。

我找到了一个带有external link demo的表 sort ，但是那个排序，而不是过滤器，并且它不会切换。

我还发现table filter with buttons demo非常接近。但是，正如我所提到的，我真的很喜欢链接，如果可能的话，想要链接切换，并且不需要过滤器来组合。

提前致谢。

Answer 1

这实际上比我想象的容易得多。这是一个直接来自上面的Mottie演示代码的工作demo。我用链接替换了按钮，重命名了相关的类，因此它更有意义，并替换了JavaScript函数上的类以匹配链接上的类。

公平警告：我并不声称知道一切，所以我的修改可能会有非常愚蠢的错误。

 $('.link-filter').click(function() {
        var filters = $('table').find('input.tablesorter-filter'),
        col = $(this).data('filter-column'),
        txt = $(this).data('filter-text');
    // filters.val('');
    filters.eq(col).val(txt).trigger('search', false);
});

各列中的过滤器组合在一起，但我目前只需要一个列过滤器，所以对我来说这不是一个问题。

Country:<br>
<a href="#" class="link-filter" data-filter-column="4" data-filter-text="">All Countries</a> | 
<a href="#" class="link-filter" data-filter-column="4" data-filter-text="Netherlands">Netherlands</a> | 
<a href="#" class="link-filter" data-filter-column="4" data-filter-text="Belgium">Belgium</a> | 
<a href="#" class="link-filter" data-filter-column="4" data-filter-text="Germany">Germany</a>
<br /><br />

<table id="festivaloverzichttable" class="tablesorter">
<thead>
<tr>
  <th width="17%" data-placeholder="Search...">Event</th>
  <th width="18%" data-placeholder="Search...">Date</th>
  <th width="9%" data-placeholder="Search...">Duration</th>
  <th width="12%" data-placeholder="Search...">Place</th>
  <th width="10%" data-placeholder="Search...">Country</th>
  <th data-placeholder="Zoek...">Genre(s)</th>
</tr>
</thead>
<tbody>
<tr>
  <td>Event 1</td>
  <td data-date="06-02">TBA</td>
  <td>2</td>
  <td>Oisterwijk</td>
  <td>Netherlands</td>
  <td>Hardstyle</td>
</tr>
<tr>
  <td>Event 2</td>
  <td data-date="10-11">11 October t/m 13 October</td>
  <td>3</td>
  <td>Volkel</td>
  <td>Netherlands</td>
  <td>Pop, Rock, Urban, Electronic</td>
</tr>
<tr>
  <td>Event 3</td>
  <td data-date="06-02">TBA</td>
  <td>1</td>
  <td>Amsterdam</td>
  <td>Netherlands</td>
  <td>Electronic</td>
</tr>
<tr>
  <td>Event 4</td>
  <td data-date="09-01">TBA</td>
  <td>1</td>
  <td>Utrecht</td>
  <td>Netherlands</td>
  <td>Electronic, Urban</td>
</tr>
<tr>
  <td>Event 5</td>
  <td data-date="07-06">6 July - 7 July</td>
  <td>2</td>
  <td>Beek en Donk</td>
  <td>Netherlands</td>
  <td>Electronic, Hardstyle</td>
</tr>

...

</tbody>
</table>

的Javascript

$("#festivaloverzichttable").tablesorter({
    sortList: [[0, 0]],
    widgets: ['zebra', 'filter', 'saveSort'],
    widgetOptions: {
      filter_reset: 'button.reset'
    }
});

 $('.link-filter').click(function() {
      var filters = $('table').find('input.tablesorter-filter'),
      col = $(this).data('filter-column'),
      txt = $(this).data('filter-text');
      // filters.val('');
     filters.eq(col).val(txt).trigger('search', false);
});

JQuery Tablesorter - 点击链接过滤

1 个答案: