Link to home
Start Free TrialLog in
Avatar of Ima Jedi
Ima JediFlag for United States of America

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.
Avatar of Rainer Jeschor
Rainer Jeschor
Flag of Germany image

Hi,
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
Avatar of Ima Jedi

ASKER

TABLE 1

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>

Open in new window


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>";

Open in new window


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>

Open in new window


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>";

Open in new window

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
<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>

Open in new window

and then
<script>
new Tablesort(document.getElementById('mytable1'));
new Tablesort(document.getElementById('mytable2));
</script>

Open in new window


HTH
Rainer
Thank you for your prompt responses!
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>&nbsp</th>
			   <th>&nbsp</th>
			   <th>&nbsp</th>
			   </tr>
	           </table>
	           <center><a style='color:#8A0808;' a href=\"#A\">A</a> &nbsp | &nbsp <a style='color:#8A0808;' a href=\"#two\">2</a> &nbsp | &nbsp <a style='color:#8A0808;' a href=\"#C\">C</a> &nbsp | &nbsp <a style='color:#8A0808;' a href=\"#D\">D</a> &nbsp | &nbsp <a style='color:#8A0808;' a href=\"#GTO\">Grand Totals</a>
	         ";

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Rainer Jeschor
Rainer Jeschor
Flag of Germany image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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.
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
Nevermind, I solved it using <thead> & <tfoot>.  Thank you for all your help!!
Rockstar!