Exforsys.com
 

Sponsored Links

 

jQuery Tutorials

 
Home Tutorials jQuery
 

jQuery Table Row Filtering

 

jQuery Table Row Filter Options

Page 2 of 2


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:



Sample Code
  1. var keywords = ['conference', 'release']
  2. $.each(keywords, function (index, keyword) {
  3. $('</p><br>
  4. <div class="filter"></div>
  5. ').text(keyword).bind('click',
  6. {'keyword': keyword}, function(event) {
  7. $table.find('tbody tr').each(function() {
  8. if ($('td', this).filter(':nth-child(' + (column + 1) +
  9. ')').text() == event.data['keyword']) {
  10. $(this).show()
  11. }
  12. else if ($('th',this).length == 0){
  13. $(this).hide()
  14. }
  15. })
  16. $(this).addClass('active').siblings().removeClass('active')
  17. }).addClass('clickable').appendTo($filters)
  18. })
Copyright exforsys.com


 


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:






First Page: jQuery Table Row Filtering


Read Next: jQuery Collecting Filter Options



 

 

Comments



Post Your Comment:

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

Sponsored Links

 

Subscribe via RSS


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 - 2009 exforsys.com. All Rights Reserved

Page copy protected against web site content infringement by Copyscape