Ima Jedi
asked on
Sorting tables using javascript
We are currently using tablesort.min.js to sort our tables. It has worked great up until I have multiple tables on the same page. The result from hitting any sort link is all rows combine on the bottom table. I need to be able to sort each table independently.
ASKER
TABLE 1
TABLE 2
if (mysql_num_rows($var1_array) > 0) {
$xxx_total = 0;
echo "
<tr bgcolor=\"#717A19\">
<th class=\"sortable-text\" height=\"25\" align='center'><font face=\"Verdana\" color=\"#FFFFFF\" size=\"2\"><b>A</b></font></th>
<th class=\"sortable-text\" height=\"25\" align='center'><font face=\"Verdana\" color=\"#FFFFFF\" size=\"2\"><b>B</b></font></th>
<th class=\"sortable-text\" height=\"25\" align='center'><font face=\"Verdana\" color=\"#FFFFFF\" size=\"2\"><b>C </b></font></th>
</tr>
if ($var1 != $varrow['place1'] || $last_date != date('m/d/Y', strtotime($varrow['date']))) {
echo "
<tr bgcolor=\"E5E8C7\">
<td class=\"rowtext\" height=\"20px\">
" . $var1 . "
</td>
<td align=\"center\">
" . $last_date . "
</td>
<td align=\"center\">
" . $num_count . "
</td>
</tr>";
TABLE 2
if (mysql_num_rows($var2_array) > 0) {
$zzz_total = 0;
echo "
<tr bgcolor=\"#717A19\">
<th class=\"sortable-text\" height=\"25\" align='center'><font face=\"Verdana\" color=\"#FFFFFF\" size=\"2\"><b>A</b></font></th>
<th class=\"sortable-text\" height=\"25\" align='center'><font face=\"Verdana\" color=\"#FFFFFF\" size=\"2\"><b>B</b></font></th>
<th class=\"sortable-text\" height=\"25\" align='center'><font face=\"Verdana\" color=\"#FFFFFF\" size=\"2\"><b>C </b></font></th>
</tr>
if ($var1 != $varrow['place2'] || $last_date != date('m/d/Y', strtotime($varrow['date']))) {
echo "
<tr bgcolor=\"E5E8C7\">
<td class=\"rowtext\" height=\"20px\">
" . $var1 . "
</td>
<td align=\"center\">
" . $last_date . "
</td>
<td align=\"center\">
" . $num_count . "
</td>
</tr>";
Hi,
thanks. OK, that looks like PHP code - but where are the table tags?
You just create table rows in the above code.
The code should look like
HTH
Rainer
thanks. OK, that looks like PHP code - but where are the table tags?
You just create table rows in the above code.
The code should look like
<table id="mytable1">
... your existing echo for the table header and loop for table 1
</table>
...
<table id="mytable2">
... your existing echo for the table header and loop for table 2
</table>
and then<script>
new Tablesort(document.getElementById('mytable1'));
new Tablesort(document.getElementById('mytable2));
</script>
HTH
Rainer
ASKER
Thank you for your prompt responses!
I am also using PHP for the creation of the table:
I am also using PHP for the creation of the table:
<?php
echo "
<table width=\"600\" border=\"0\" align=\"center\" cellpadding=\"0\" cellspacing=\"0\">
<center>
<H1>$domain</H1>
<H2><b>From:</b><font color='red'> $from2</font> <b>To:</b><font color='red'> $to2 </font></H2></center>
</table>
<table width=\"600\" border=\"0\" align=\"center\" cellpadding=\"0\" cellspacing=\"0\">
<tr border=\"0\" bgcolor=\"#FFFFFF\">
<th> </th>
<th> </th>
<th> </th>
</tr>
</table>
<center><a style='color:#8A0808;' a href=\"#A\">A</a>   |   <a style='color:#8A0808;' a href=\"#two\">2</a>   |   <a style='color:#8A0808;' a href=\"#C\">C</a>   |   <a style='color:#8A0808;' a href=\"#D\">D</a>   |   <a style='color:#8A0808;' a href=\"#GTO\">Grand Totals</a>
";
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
You are correct. I had one opening table tag and one closing table tag for all tables with spaces in between. Thank you!
Now when I sort on tables, the "Totals" row goes to the top no matter how I sort it.
Now when I sort on tables, the "Totals" row goes to the top no matter how I sort it.
Hi,
could you please post the final resulting HTML (not the PHP code) - e.g. in IE -> right click on the page -> View source.
It make things a thousend times easier when we can see the final dom / Content.
Thanks.
Rainer
could you please post the final resulting HTML (not the PHP code) - e.g. in IE -> right click on the page -> View source.
It make things a thousend times easier when we can see the final dom / Content.
Thanks.
Rainer
ASKER
Nevermind, I solved it using <thead> & <tfoot>. Thank you for all your help!!
ASKER
Rockstar!
how does your HTML and JavaScript source code look alike?
You should be able to initialize each table separately when using a unique id on each table.
HTH
Rainer