Type Tablesorter; multiple flags, multiple columns

Question

I have a tablesorter that works almost the way I would like, there is one more thing that I don't know how to do.

Now I have a table in which you can search in columns, and you can quickly filter the table by clicking the button that places the value in the column search field.

The fact is that I would like people to be able to check several checkboxes so that the table is filtered based on this input. These flags are "grouped", each group should filter its corresponding column (for example, checking different months should filter the column of the month). You need to check multiple checkboxes in multiple groups. For example, you can check "Netherlands, Belgium", which filters in the country column And checks "August" and "September", which adds filters to the month column. You can check my sample site to find out what I mean.

Selected flags should not enter their values ​​in the search fields, as now, buttons.

Finally, I would like to include a button that clears all search queries and, therefore, reloads the table (which is already running now), but should also uncheck all the boxes.

I am not a programmer, but with some basic knowledge, a lot of research, trial and error, I managed to start the tracer. I really hope there is a way to work with checkboxes.

Example page: http://www.yellowtipi.nl/tablesortertest/index.html (this is an unoccupied version to make the code clean, the final version will contain more than 100 lines).

If something is unclear let me know!

Answer 1

All you have to do is comment or delete one line - filters.val(''); :

Here is the code and a demo (I added buttons for each set to allow filter column clearing)

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

---

In addition, fork of tablesorter is required for this code to work . Here is the code for others who may 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 analyzer code and the default filter filter settings 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 multiple options, change the button search to the next ( 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); });