Ajax，JQuery html表重新排序 [英] Ajax, JQuery html table re-order

问题描述

我需要一些有关使用jquery，ajax和php重新排序html表的帮助.我在一个可以正常工作的列表上获得了一些代码，但是似乎无法使它适用于表行.这是代码，任何人都可以帮忙.创建表的功能:

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

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

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

print_r ($sql);
?>

推荐答案

如果每次都加载所有行，则始终可以使用TableSorter之类的jQuery插件完全在客户端进行此操作.这将很容易实现.

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/

这篇关于Ajax，JQuery html表重新排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！