alt
Advertisement
Sponsored links
Online Training
Career Series
Exforsys
Exforsys arrow Tutorials arrow jQuery arrow jQuery Collecting Filter Options
Site Search


jQuery Collecting Filter Options

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:

  1. var keywords = {};
  2.  
  3. $table.find('tbody tr td').filter(':nth-child(' + (column + 1) +
  4.  
  5. ')').each(function() {
  6.  
  7. keywords[$(this).text()] = $(this).text();
  8.  
  9. });
 

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:

  1. $('</p>
  2. <div class="filter">all</div>
  3. ').click(function() {
  4.  
  5. $table.find('tbody tr').show();
  6.  
  7. $(this).addClass('active').siblings().removeClass('active');
  8.  
  9. }).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(0)
Comments (0)add comment

Write comment

busy
 
< Prev   Next >
Exforsys Offers
© 2008 Exforsys.com
Joomla! is Free Software released under the GNU/GPL License.
Page copy protected against web site content infringement by Copyscape