alt
Advertisement
Sponsored links
Online Training
Career Series
Exforsys
Exforsys arrow Tutorials arrow jQuery arrow jQuery Expanding and Collapsing Table Rows
Site Search


jQuery Expanding and Collapsing Table Rows

jQuery Expanding and Collapsing Table Rows

The expanding and collapsing behavior added earlier also conflicts with our filters. If a section is collapsed and a new filter is chosen, then the matching items are displayed, even if in the collapsed section. Conversely, if the table is filtered and a section is expanded, then all items in the expanded section are displayed regardless of whether they match the filter.

Since we have added the filtered class to all rows when they are removed by a filter button, we can check for this class inside our collapser's click handler:

  1. var toggleSrc = $(this).attr('src');
  2.  
  3. if ( toggleSrc == toggleMinus ) {
  4.  
  5. $(this).attr('src', togglePlus)
  6.  
  7. .parents('tr').siblings().addClass('collapsed').fadeOut('fast');
  8.  
  9. } else{
  10.  
  11. $(this).attr('src', toggleMinus)
  12.  
  13. .parents('tr').siblings().removeClass('collapsed')
  14.  
  15. .not('.filtered').fadeIn('fast');
  16.  
  17. };
 

While we are collapsing or expanding rows, we add or remove another new class on the rows. We need this class to solve the other half of the problem. The filtering code can use the class to ensure that a row should be shown when the filter changes:

  1. $table.find('tbody tr').each(function() {
  2.  
  3. if ($('td', this).filter(':nth-child(' + (column + 1) + ')').text()
  4.  
  5. == e.data['keyword']) {
  6.  
  7. $(this).removeClass('filtered').not('.collapsed').show();
  8.  
  9. }
  10.  
  11. else if ($('th',this).length == 0) {
  12.  
  13. $(this).addClass('filtered').hide();
  14.  
  15. }
  16.  
  17. });
 

Now our features play nicely, each able to hide and show the rows independently.


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