jQuery Collecting Filter Options from Content

Now we need to expand the filter options to cover the range of available topics in the table. Rather than hard-coding all of the topics, we can gather them from the text that has been entered in the table. We can change the definition of keywords to read:

var keywords = {}; 
 
$table.find('tbody tr td').filter(':nth-child(' + (column + 1) + 
 
')').each(function() { 
 
keywords[$(this).text()] = $(this).text(); 
 
}); 
   

This code relies on two tricks:

• By using a map rather than an array to hold the keywords as they are found, we eliminate duplicates automatically.
• jQuery's $.each() function lets us operate on arrays and maps identically, so no later code has to change. Now we have a full complement of filter options:

Reversing the Filters

For completeness, we need a way to get back to the full list after we have filtered it.
Adding an option for all topics is pretty straightforward:

$('</p>
<div class="filter">all</div>
').click(function() { 
 
$table.find('tbody tr').show(); 
 
$(this).addClass('active').siblings().removeClass('active'); 
 
}).addClass('clickable active').appendTo($filters);  
   

This gives us an all button that simply shows all rows of the table again. For good measure we mark it as active to begin with.

TrackBack URI for this entry

Comments (0)

Subscribe to this comment's feed

Show/Hide comments

Show/Hide comment form