alt
Advertisement
Sponsored links
Online Training
Career Series
Exforsys
Exforsys arrow Tutorials arrow jQuery arrow jQuery Table Row Filtering
Site Search


jQuery Table Row Filtering
Article Index
jQuery Table Row Filtering
jQuery Table Row Filter Options

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:

  1. var keywords = ['conference', 'release'];
  2.  
  3. $.each(keywords, function (index, keyword) {
  4.  
  5. $('</p>
  6. <div class="filter"></div>
  7. ').text(keyword).bind('click',
  8.  
  9. {'keyword': keyword}, function(event) {
  10.  
  11. $table.find('tbody tr').each(function() {
  12.  
  13. if ($('td', this).filter(':nth-child(' + (column + 1) +
  14.  
  15. ')').text() == event.data['keyword']) {
  16.  
  17. $(this).show();
  18.  
  19. }
  20.  
  21. else if ($('th',this).length == 0){
  22.  
  23. $(this).hide();
  24.  
  25. }
  26.  
  27. });
  28.  
  29. $(this).addClass('active').siblings().removeClass('active');
  30.  
  31. }).addClass('clickable').appendTo($filters);
  32.  
  33. });
 

 

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:


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