Exforsys.com
 
Home Tutorials jQuery
 

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:

 

Sponsored Links

 

Sample Code
  1. var keywords = {}
  2. $table.find('tbody tr td').filter(':nth-child(' + (column + 1) +
  3. ')').each(function() {
  4. keywords[$(this).text()] = $(this).text()
  5. })
Copyright exforsys.com



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:


Sample Code
  1. $('</p><br>
  2. <div class="filter">all</div>
  3. ').click(function() {
  4. $table.find('tbody tr').show()
  5. $(this).addClass('active').siblings().removeClass('active')
  6. }).addClass('clickable active').appendTo($filters)
Copyright exforsys.com


 

 

Sponsored Links

 

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.



Read Next: jQuery Interacting with Other Code



 

 

Comments



Post Your Comment:

Members Please Login
Your Name:*
e-mail ID:(required for notification)*
Image Verification: 
 
 Subscribe    

Sponsored Links

 

 
 


Get Daily Updates via Subscribe to Exforsys Free Training via email


Get Latest Free Training Updates delivered directly to your Inbox...

Enter your email address:


 

Subscribe to Exforsys Free Training via RSS
 

 
 
Partners -  Privacy and Legal Policy -  Site News -  Contact   Sitemap  

Copyright © 2000 - 2010 exforsys.com. All Rights Reserved

Page copy protected against web site content infringement by Copyscape