php - Ajax、JQuery html 表重新排序

Question

我需要一些帮助来使用 jquery、ajax 和 php 重新排序 html 表。我得到了一些在列表上执行此操作的代码，该代码工作正常，但似乎无法使其适用于表行。这是代码，有人可以帮忙吗？创建表的函数:

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

流程排序.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) :
    $sql=mysql_query("UPDATE pages SET position = $position WHERE id = $item");
endforeach;

print_r ($sql);
?>

Answer 1

如果您每次都加载所有行，则始终可以使用 TableSorter 等 jQuery 插件完全在客户端完成此操作。这将非常容易实现。

http://tablesorter.com/docs/