Tablesorter排序;多個複選框，多列

Question

我有一個幾乎按照我喜歡的方式運行的tablesorter，還有一件事我不知道該怎麼做。

現在，我有表，你可以在搜索欄，您可以快速地通過按下一個按鈕，放在一個欄的搜索字段中的值過濾表。

問題是我希望人們能夠檢查多個複選框，以便根據此輸入過濾表格。這些複選框是「分組」的，每個組應過濾他的相應列（例如，檢查不同月份應過濾月份列）。應該可以檢查多個組中的多個複選框。例如，您可以查看'荷蘭'，'比利時'，它在國家/地區列上進行過濾，並檢查在「月份」列中添加過濾器的「八月」和「九月」。你可以查看我的示例網站，看看我的意思。

複選框不應該在搜索字段中輸入它們的值，例如現在按鈕。

最後，我想包括一個按鈕，它會清除所有的搜索查詢和爲此重置表（它現在已經做），但它也應該取消所有的複選框。

我不是一個程序員，但有一些基本的知識，大量的研究和反覆試驗，我設法拿到的tablesorter運行。我真的希望有一種方法來處理複選框。

示例頁面：http://www.yellowtipi.nl/tablesortertest/index.html（這是一個無樣式的版本，使代碼清晰，最終版本將有超過100行）。

如果有什麼不清楚的，請告訴我！

Answer 1

所有你需要做的是註釋掉或刪除，一條線 - filters.val('');：

下面是代碼，並a demo（我說清楚鍵可在各集以及允許清除過濾柱）

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

---

此外，該代碼需要我fork of tablesorter爲了工作。下面是其他可能感興趣的代碼：（我刪除的數據解析代碼和缺省過濾器插件選項，以避免混淆）

<button class="search" data-filter-column="4" data-filter-text="Netherlands">Netherlands</button> 
<button class="search" data-filter-column="4" data-filter-text="Belgium">Belgium</button> 
<button class="search" data-filter-column="4" data-filter-text="Germany">Germany</button> 
<button class="search" data-filter-column="4" data-filter-text="">Clear</button> 

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

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

---

：

HTML例子

更新：要允許多個選項，按鈕搜索更改爲以下（updated demo）

$('button.search').click(function() { 
    var filters = $('table').find('input.tablesorter-filter'), 
     col = $(this).data('filter-column'), 
     txt = $(this).data('filter-text'), 
     cur = filters.eq(col).val(), 
     mult, i; 

    if (cur && txt !== '') { 
     mult = cur.split('|'); 
     i = $.inArray(txt, mult); 
     if (i < 0) { 
      mult.push(txt); 
     } else { 
      mult.splice(i,1); 
     } 
     txt = mult.join('|'); 
    }   
    filters.eq(col).val(txt).trigger('search', false); 
});