JQuery Tablesorter - фильтр, нажав на ссылку

Question

Я использую превосходную вилку Mottie Tablesorter и хотел бы иметь возможность фильтровать столбцы (столбцы) таблицы с внешними ссылками.

• Это не является абсолютно необходимым, но я бы хотел сделать несколько кликов, чтобы включить и выключить фильтр. В качестве альтернативы, я всегда мог бы добавить ссылку All Records, которая сбрасывает столбцы (столбцы).
• Мне не нужно комбинировать фильтры в одном столбце. Другими словами, данные не будут как в январе, так и в октябре.

Я нашел таблицу рода с external link demo, но один рода, а не фильтры, и не переключается.

Я также нашел table filter with buttons demo, который довольно близко. Однако, как я уже упоминал, мне бы очень нравились ссылки, хотелось бы, чтобы ссылки были доступны, если это возможно, и не нужны фильтры для объединения.

Заранее спасибо.

Answer 1

Это было на самом деле намного проще, чем я думал. Вот рабочий demo, который появился непосредственно из демонстрационного кода Mottie выше. Я заменил кнопки ссылками, переименовал ассоциированный класс, чтобы он стал более понятным и заменил класс на функцию 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); 
});