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!

Mottie · Accepted Answer · 2013-01-07 16:39:39Z

2

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

edited Jan 7, 2013 at 16:39

answered Nov 22, 2012 at 14:26

Mottie

86.8k30 gold badges132 silver badges248 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

eskimo Over a year ago

Hi @Mottie, thanks a lot! The thing is that after I posted my question, I realized that visitors should be able to check multiple options in each category using checkboxes. So then you can check multiple countries, months and genres. I've edited my question a few days ago, for what I mean and an explanation see: link. I think it's a small step from the button solution. Is this possible?

Mottie Over a year ago

Ok, I've updated my answer - here is a new demo - note that clicking on a button a second time removes the value from the filter.

eskimo Over a year ago

Hi Mottie, thanks again I really appreciate your help! Still a few problems: 1) clicking the clear buttons doesn't empty the searchboxes (like the reset button does), 2) it's an OR statement now. If I click Electronic and Urban, then cells with the value 'Electronic' still show op. It is possible to make it an AND statement? Selecting Electronic and Urban should then still display cells containing 'Pop, Electronic, Urban'. I think that with this functionality it is better to use checkboxes instead of buttons. Would be much clearer towards the end-user. Is that possible?

Mottie Over a year ago

Well there isn't an "offical" AND built into the filter yet. I haven't had time to work on it, but check out the code in this comment, maybe it will help you.

Collectives™ on Stack Overflow

Tablesorter sort; multiple checkboxes, multiple columns

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related