Tablesorter sort; multiple checkboxes, multiple columns

Question

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.

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!

Answer 1

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 example:

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

---

Update: To allow for multiple options, change the button search to the following (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);
});