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>

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

print_r ($sql);
?>

Answer 1

如果你每次都加载所有行，你总是可以使用像TableSorter这样的jQuery插件完全在客户端完成。这很容易实现。

http://tablesorter.com/docs/

Ajax，JQuery html表重新排序

1 个答案: