JQuery Tablesorter - 点击链接过滤

Question

I'm using @Mottie's excellent fork of Tablesorter and would like to be able to filter table column(s) with external links.

• It isn't strictly necessary, but I'd like to make multiple clicks toggle the filter on and off. Alternatively, I could always add an All Records link that resets the column(s).
• I don't need to combine filters in a single column. In other words, the data wouldn't be both January and October.

I found a table sort with external link demo , but that one sorts, not filters, and it doesn't toggle.

I also found a table filter with buttons demo which is pretty close. However, as I mentioned, I'd really like links instead, would like to have the links toggle if possible, and don't need the filters to combine.

Thanks in advance.

Answer 1

This was actually a lot easier than I thought. Here's a working demo that came directly from Mottie's demo code above. I replaced the buttons with links, renamed the associated class so it made more sense and replaced the class on the JavaScript function to match the one on the links.

Fair warning: I don't claim to know everything, so my modifications could have very silly errors.

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

The filters in the various columns combine, but I only need a single column filter at the moment, so that's not really an issue for me.

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);
});