jQuery Table Row Filter Options

Now we can move on to actually implementing a filter. To start with, we will add filters for a couple of known topics. The code for this is quite similar to the author highlighting example from before:

var keywords = ['conference', 'release']; 
 
$.each(keywords, function (index, keyword) { 
 
$('</p>
<div class="filter"></div>
').text(keyword).bind('click', 
 
{'keyword': keyword}, function(event) {
 
$table.find('tbody tr').each(function() { 
 
if ($('td', this).filter(':nth-child(' + (column + 1) + 
 
')').text() == event.data['keyword']) { 
 
$(this).show(); 
 
} 
 
else if ($('th',this).length == 0){ 
 
$(this).hide(); 
 
} 
 
}); 
 
$(this).addClass('active').siblings().removeClass('active'); 
 
}).addClass('clickable').appendTo($filters); 
 
});

Starting with a static array of keywords to filter by, we loop through and create a button for each. Just as in the paging example, we need to use the data parameter of .bind() to avoid accidental closure problems. Then, in the click handler, we compare each cell against the keyword and hide the row if there is no match. We must check whether the row is a subheader, to avoid hiding those in the process. Both of the buttons now work as advertised:

Filter Options

Tags