TableSorter multi-filter - tablesorter

Question

I have a tablesorter table that contains a 'Category' column. My searches reveal many different ways to filter on various types of columns but they all boil down to a single filter criteria.
What I have is a section on the page that lists all the categories with checkboxes, the idea is to allow the user to select which categories they want to look at (there are 10 different categories) and have these selected categories be applied to filter the rows in the tablesorter.
I could always brute force this with a post back to my controller and return a model with a filtered set of rows, but if there is a sensible way to accomplish this on the client side I would greatly appreciate anyones input on where to begin tackling a problem like this.

Answer 1

This is my first crack at it. So assume I have a bunch of checkboxes representing the categories to filter on. The class 'tablesorter' is what I called the table containing the data. I added an id attribute to the cell which has the category in it. I did it this way because I do not want the id to be visible on screen. At the end I refresh the zebra striping after hiding/unhiding rows. If there is a better way to do this, I'm all ears (I am a total newb to javascript/jquery/tablesorter).
function FilterCompanies() {
$(':checkbox:not(:checked)').each(function () {
var unselectedCategoryId = $(this).attr('id').substring(3);
$('.tablesorter > tbody > tr > td[id]').each(function() {
if ($(this).attr('id') == unselectedCategoryId) {
$($(this).parent()).addClass('hidden');
}
});
});
$(':checkbox:checked').each(function () {
var unselectedCategoryId = $(this).attr('id').substring(3);
$('.tablesorter > tbody > tr > td[id]').each(function () {
if ($(this).attr('id') == unselectedCategoryId) {
$($(this).parent()).removeClass('hidden');
}
});
});
$(".tablesorter").trigger("applyWidgets")
}
Here's what it looks like: