Hi,
I am using a jquery plugin called
tablesorter. It is a commonly used public plugin. It works fine, but
I've found a quirk that occurs when you sort, and can't seem to fix it
and would love some help if possible.
When you sort, the sort
works, but for some reason all the <hr> tags which render a
horizontal line, end up getting placed sorted to the top of the table.
So the data sorts but since some of my <tr> rows contains an
<hr> tag for example, like a visual separator, it sorts that too.
I'm
looking to have an HTML table that is sortable but allow me to still
have a row in the output that doesn't contain data as seen in my code..
Here is the code:
Any help appreciated
<script type="text/javascript">
$(document).ready(function() {
$("#my_table").tablesorter({
debug:false
});
}
);
</script>
<table id="my_table" cellpadding="5" cellspacing="0">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>John</td>
<td>jsmith@gmail.com</td>
<td>$50.00</td>
<td>http://www.jsmith.com</td>
</tr>
<tr>
<td colspan="5"><hr style="width: 585px;"></td>
</tr>
<tr>
<td>Bach</td>
<td>Frank</td>
<td>fbach@yahoo.com</td>
<td>$50.00</td>
<td>http://www.frank.com</td>
</tr>
<tr>
<td colspan="5"><hr style="width: 585px;"></td>
</tr>
<tr>
<td>Rick</td>
<td>Smith</td>
<td>fbach@yahoo.com</td>
<td>$50.00</td>
<td>http://www.frank.com</td>
</tr>
</tbody>
</table>