jquery tablesorter problem in FF only - header row disappears after show-hide of rows

Posted by dac on Stack Overflow See other posts from Stack Overflow or by dac
Published on 2010-12-25T03:32:21Z Indexed on 2010/12/25 3:54 UTC
Read the original article Hit count: 299

Filed under:
|
|
|

When the page loads, all the records show. Sorting works great until show-hide is used to filter the rows so only some show. Then the header row--with the arrows for sorting--DISAPPEARS. The problem is only in Firefox. It works great in IE7 and IE8.

I'm using jQuery 1.4.2 from google.

Code for show-hide

$(document).ready(function() {
    // show all the rows
    $("#org_status tr").show();

    //find selected filter
    $("#filter_status a").click(function(evt) {
        evt.preventDefault();
        $("#org_status tr").hide();
        var id = $(this).attr('id');

        $("." + id).show();
    });
});

Here is the HTML:

<!-- show-hide "buttons" -->
<p id='filter_status'>Filter by status: 
    <a href='#' id='All'>All</a> 
    <a href='#' id='Active'>Active</a> 
    <a href='#' id='Inactive'>Inactive</a> 
    <a href='#' id='Pending'>Pending</a>
</p>

<!-- table to sort ->
<table id='org_status' class='info_table tablesorter'>
  <thead>
    <tr>
      <th class='org-name-col'>Name</th>
      <th class='org-status-col'>Status</th>
    </tr>
  </thead>
  <tbody>
<tr class='All Active'>
  <td><a href='admin/org_edit.php?org=29'>Foo Net</a></td>
  <td>Active</td>";
</tr>
<tr class='All Inactive'>
  <td><a href='admin/org_edit.php?org=22'>Bar</a></td>
  <td>Active</td>";
</tr>
<tr class='All Pending'>
  <td><a href='admin/org_edit.php?org=11'>
      Bar Foo Very Long Org Name Goes Here</a></td>
  <td>Active</td>";
</tr>
  </tbody>  
</table>    

© Stack Overflow or respective owner

Related posts about firefox

Related posts about table