表排序器排序；多个复选框，多列 [英] Tablesorter sort; multiple checkboxes, multiple columns

问题描述

我有一个按我希望的方式运行的表排序器，还有一件事我不知道该怎么做.

I've got a tablesorter running almost the way I would like it, there is just one more thing that I don't know how to do.

现在，我有一个表，您可以在其中搜索列，并且可以通过按一个将值添加到列的搜索字段中的按钮来快速过滤该表.

Right now, I have table in which you can search in columns and you can quickly filter the table by pressing a button which puts a value in the search field of a column.

问题是我希望人们能够选中多个复选框，以便表格将基于此输入进行过滤.这些复选框是分组的"，每个组应在其对应的列上进行过滤(例如，检查不同的月份应过滤月份列).应该可以检查多个组中的多个复选框.例如，您可以在国家列上选中荷兰，比利时"，然后在月份列中选中八月"和九月".您可以查看我的示例网站，了解我的意思.

The thing is that I would like people to be able to check multiple checkboxes so table will be filtered based on this input. These checkboxes are 'grouped', each group should filter on his corresponding column (eg checking different months should filter the month column). It should be possible to check multiple checkboxes in multiple groups. For example you can check 'Netherlands, 'Belgium' which filters on the country column AND check 'August' and 'September' which adds filters to the month column. You can check my example website to see what I mean.

选中的复选框不应像现在按钮那样在搜索字段中输入其值.

The checked boxes should not input their values in the search fields like the buttons do now.

最后，我想添加一个按钮，该按钮可清除所有搜索查询并因此重置表(现在已经进行了重置)，但还应取消选中所有复选框.

At last, I'd like to include a button which clears all the search queries and therefor resetting the table (which it already does now) but it should also uncheck all the checkboxes.

我不是程序员，但是凭借一些基本知识，大量研究和反复试验，我设法使表排序程序运行.我真的希望有一种使用复选框的方法.

I'm not a programmer, but with some basic knowledge, a lot of research and trial and error I managed to got the tablesorter running. I really hope there's a way to work with the checkboxes.

示例页面: http://www.yellowtipi.nl/tablesortertest/index.html(这是一个无样式的版本，可以使代码清晰明了，最终版本将有100多行).

Example page: http://www.yellowtipi.nl/tablesortertest/index.html (this is an unstyled version to make the code clear, the final version will have 100+ rows).

如果不清楚，请告诉我！

If anything is unclear let me know!

推荐答案

所有您需要做的就是注释掉或删除一行-filters.val('');:

All that you need to do is comment out, or remove, one line - filters.val('');:

这是代码，以及一个演示(我为每个集合添加了清除按钮，如下所示:并允许清除过滤器列)

Here is the code, and a demo (I added clear buttons to each set as well to allow clearing a filter column)

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

---

此外，此代码还需要我的表排序器的叉子才能正常工作.这是其他可能感兴趣的代码:

---

Also, this code requires my fork of tablesorter in order to work. Here is the code for others that might be interested:

HTML示例:

<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(为避免混淆，我删除了数据解析器代码和默认的过滤器小部件选项)

Javascript (I removed the data parser code and default filter widget options to avoid confusion)

$("#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);
});

---

更新:要允许多个选项，请将按钮搜索更改为以下内容(已更新演示)

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

这篇关于表排序器排序；多个复选框，多列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！