Free Training
C Language   |   CSS   |   MainFrame   |   VBScript   |   PHP   |   XML   |   C++ Tutorials   |   Ajax   |   JavaScript   |   CSS3   |   UML   |   jQuery   |   Microsoft AJAX

Sponsored Links

jQuery Tutorials

 
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:



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


 



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