Quirks with Tablesorter

[West415]

Hi,

I am using a jquery plugin called tablesorter. It works fine but I've found
a quirk 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 link end up getting placed at the top of the table. So the
data sorts right but something is going on when i use the <hr> tags.

Here is the code:


<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>***@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>***@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>***@yahoo.com</td>
<td>$50.00</td>
<td>http://www.frank.com</td>
</tr>

</tbody>

</table>


Any help appreciated

-ws

[Nathan Klatt]

I am using a jquery plugin called tablesorter.  It works fine but I've found
a quirk 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 link end up getting placed at the top of the table.  So the
data sorts right but something is going on when i use the <hr> tags.

Sounds right to me. Instead of rows containing hrs, how about some
border styling on the trs or tds?

Nathan

[West415]

Thanks for the reply.

I don't need the headers to repeat though. I'm trying to have a visual
separator between the rows. I don't have to use an <hr> tag, but the
problem is, it tries to sort every row as if there is data there. I'd like
it to ignore that row when doing the sort.

Any idea? I'm happy to replace my <hr> tag with an image but I'm afraid it
may try to sort that row to....

Hi,
I had similar issue.
colspan="5" this is the code that is the reason it does not work properly,
try colspan="4", colspan="3"... and you will see
The script is trying to sort this data (which is <hr> line)
To insert "line like hr" try modifying this
http://tablesorter.com/docs/example-widgets.html
instead of repeating header try to insert line or something
And in the end I advice you NOT to use hr tag anywhere on your website,
there are huge cross browser issues. Every browser displays it differently
and it is hard to style. Use some kind of 1px / 1px image and add css to
get margins and set width to 100% to make it wide

Post by West415
Hi,
I am using a jquery plugin called tablesorter. It works fine but I've
found a quirk 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 link end up getting placed at the top
of the table. So the data sorts right but something is going on when i
use the <hr> tags.
<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>$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>$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>$50.00</td>
<td>http://www.frank.com</td>
</tr>
</tbody>
</table>
Any help appreciated
-ws

[Nathan Klatt]

I don't need the headers to repeat though.  I'm trying to have a visual
separator between the rows.  I don't have to use an <hr> tag, but the
problem is, it tries to sort every row as if there is data there.  I'd like
it to ignore that row when doing the sort.
Any idea?  I'm happy to replace my <hr> tag with an image but I'm afraid it
may try to sort that row to....

Yeah, I'm sure it will.

What determines whether there is a separator between two rows? I
expect you'll have to re-apply that logic each time the table is
sorted; just add a class to the trs that you want to have the
separator after (or before, I suppose). Remember to remove the class
before you re-apply the logic, though. :)

Good luck.

Nathan

[aquaone]

seconded. Your best bet is to write your own widget that deletes and appends
your separators for you on sort.

Post by Nathan Klatt

Post by West415
I don't need the headers to repeat though. I'm trying to have a visual
separator between the rows. I don't have to use an <hr> tag, but the
problem is, it tries to sort every row as if there is data there. I'd

like

Post by West415
it to ignore that row when doing the sort.
Any idea? I'm happy to replace my <hr> tag with an image but I'm afraid

it

Post by West415
may try to sort that row to....

Yeah, I'm sure it will.
What determines whether there is a separator between two rows? I
expect you'll have to re-apply that logic each time the table is
sorted; just add a class to the trs that you want to have the
separator after (or before, I suppose). Remember to remove the class
before you re-apply the logic, though. :)
Good luck.
Nathan