Ajax，JQuery html表重新排序

我需要一些幫助，使用jQuery，Ajax和PHP重新排序html表。我有一些代碼可以在列表中正常工作，但似乎無法使它適用於表格行。這裏是代碼，任何人都可以幫忙。函數來創建表：Ajax，JQuery 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); 
?>

來源

2011-03-21 Luke Stirk

您是否曾經使用過該產品？如果您分享您的解決方案或接受適合您的答案，那將是非常棒的！ :-) – 2012-11-19 19:09:22

如果你每次加載所有行的，你可以總是使用像TableSorter這樣的jQuery插件完全完成客戶端。這將很容易實現。

http://tablesorter.com/docs/

來源

2011-03-21 20:39:34

Ajax，JQuery html表重新排序

回答

相關問題