Ajax, JQuery html table re-order

I need some help with re ordering a html table using jquery, ajax and php. I got some code for doing it on a list which works fine, but cant seem to get it to work for a table row. Here is the code, could anybody help with this. Function to create the table:

        echo '<table id="test-list" class="gtable sortable">';
        echo '<thead>';
        echo "<tr>";
        echo "<th>Page name</th>";
        echo "<th>Edit</th>";
        echo "<th>Show</th>";
        echo "<th>Delete</th>";
        echo "</thead>";
        echo "</tr>";
        echo "<tbody class='ui-sortable'>";

while($row = mysql_fetch_array($result))
    {
        $tableid++;

        echo "<tr id='listItem_$tableid'>";
        echo "<td >"  . $row['page_name'] ."</td>";
    if ($row['id'] == '1'){
        echo "<td>"."<a href='edit_page.php?id=$row[id]'><img src='http://myserver.dev/crm/admin/images/edit.png' /></a></td>";
        echo "<td><a href='show_page.php?id=$row[id]'><img class='handle' src='http://myserver.dev/crm/admin/images/arrow-move.png' alt='Move' title='Move' /></a></td>";
    }
    else {
        echo "<td>"."<a href='edit_page.php?id=$row[id]'><img src='http://myserver.dev/crm/admin/images/edit.png' /></a></td>";
        echo "<td><a href='show_page.php?id=$row[id]'><img class='move' src='http://myserver.dev/crm/admin/images/arrow-move.png' alt='Move' title='Move' /></a></td>";
        echo "<td><a href='delete_pages.php?id=$row[id]'><img src='http://myserver.dev/crm/admin/images/cross.png' /></a>" ."</td>";
    }

    }
echo "</tr>";
echo "</tbody>";
echo "</table>";

Jquery and Ajax:

<script type="text/javascript">
  // When the document is ready set up our sortable with it's inherant function(s)
  $(document).ready(function() {
    $("#test-list").sortable({
      handle : '.handle',
      update : function () {
          var order = $('#test-list').sortable('serialize');
        $("#info").load("process-sortable.php?"+order);
      }
    });
});
</script>

process-sortable.php

<?php
/* This is where you would inject your sql into the database 
   but we're just going to format it and send it back
*/

$con = mysql_connect("localhost","root","root");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("website", $con);

foreach ($_GET['listItem'] as $position => $item) :
    开发者_如何学JAVA$sql=mysql_query("UPDATE pages SET position = $position WHERE id = $item");
endforeach;

print_r ($sql);
?>

---

If you're loading all of the rows every time, you could always just do it entirely client-side using a jQuery plugin like TableSorter. This would be very easy to implement.

http://tablesorter.com/docs/