Exforsys.com
 

Sponsored Links

 

jQuery Tutorials

 
Home Tutorials jQuery
 

jQuery Table Row Filtering

 

jQuery Table Row Filtering

Page 1 of 2

jQuery Table Row Filtering

Earlier we examined sorting and paging as techniques for helping users focus on relevant portions of a table's data. We saw that both could be implemented either with server-side technology or with JavaScript. Filtering completes this arsenal of data arrangement strategies. By displaying to the user only the table rows that match a given criterion, we can strip away needless distractions.



We have already seen how to perform a type of filter, highlighting a set of rows.


Now we will extend this idea to actually hiding rows that don't match the filter.


We can begin by creating a place to put our filter buttons. In typical fashion, we insert these controls using JavaScript so that people without scripting available do not see the options:


Sample Code
  1. $(document).ready(function() {
  2. $('table.filterable').each(function() {
  3. var $table = $(this)
  4. $table.find('th').each(function (column) {
  5. if ($(this).is('.filter-column')) {
  6. var $filters = $('</p><br>
  7. <div class="filters">
  8. <h3>Filter by '
  9. + $(this).text() + ':</h3>
  10. </div>
  11. ')
  12. $filters.insertBefore($table)
  13. }
  14. })
  15. })
  16. })
Copyright exforsys.com


 


We get the label for the filter box from the column headers, so that this code can be reused for other tables quite easily. Now we have a heading awaiting some buttons:




Next Page: jQuery Table Row Filter Options


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