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>
