jQuery拖放表行排序不起作用

Question

I wanted to make a script to order some rows from a database with drag & drop. The rows are displayed in a table, and I drag and drop rows to reorder them. Each tr have the row id from database. When I drag and drop a row, jquery serialize the table content and sends it to php to save rows position.

What could be the problem that rows position are not saved in db?

Table with rows:

$select_categories = mysqli_query($db_connect, "SELECT `id`, `title` FROM `categories` ORDER BY `category_order` ASC") or die(mysqli_error());

if(mysqli_num_rows($select_categories) != 0)
{
    echo '<table cellpadding="0" cellspacing="0" class="manage_content" id="sort_rows" align="center">';

    while($category = mysqli_fetch_assoc($select_categories))
    {
        echo '
        <tr id="row-'.$category['id'].'">
            <td width="700"><a href="'.$website_address.'/admin/categories_edit.php?id='.$category['id'].'">'.$category['title'].'</a></td>
            <td><a href="'.$website_address.$_SERVER['PHP_SELF'].'?action=delete_content&amp;id='.$category['id'].'" class="delete_content">Delete</a></td>
        </tr>
        ';
    }

    echo '</table>';
}

jQuery

$("#sort_rows tbody").sortable({

    cursor: 'move',
    delay: 180,

    update: function()
    {
        var rowsOrder = $(this).sortable("serialize");

        $.post("ajax_actions.php", { action:'change_rows_order', table:'categories', order:'category_order', rows_order:rowsOrder } );
    }

}).disableSelection();

AJAX

if(isset($_POST['action']) && $_POST['action'] == 'change_rows_order')
{
    $order_no = 1;

    foreach($_POST['rows_order'] as $row_id)
    {
        $update_order = mysqli_query($db_connect, "UPDATE `".clear_tags($_POST['table'])."` SET `".clear_tags($_POST['order'])."` = '".$order_no."' WHERE `id` = '".$row_id."'") or die(mysqli_error());

        $order_no++;
    }
}

HTML

<table cellpadding="0" cellspacing="0" class="manage_content" id="sort_rows" align="center">
<tr id="row-10">
    <td width="700"><a href="http://local.admin.com/admin/categories_edit.php?id=10">Editorial</a></td>
    <td><a href="http://local.admin.com/admin/index.php?action=delete_content&amp;id=10" class="delete_content">Delete</a></td>
</tr>

<tr id="row-11">
    <td width="700"><a href="http://local.admin.com/admin/categories_edit.php?id=11">Fashion</a></td>
    <td><a href="http://local.admin.com/admin/index.php?action=delete_content&amp;id=11" class="delete_content">Delete</a></td>
</tr>

<tr id="row-12">
    <td width="700"><a href="http://local.admin.com/admin/categories_edit.php?id=12">Street Style</a></td>
    <td><a href="http://local.admin.com/admin/index.php?action=delete_content&amp;id=12" class="delete_content">Delete</a></td>
</tr>

<tr id="row-13">
    <td width="700"><a href="http://local.admin.com/admin/categories_edit.php?id=13">Portraits</a></td>
    <td><a href="http://local.admin.com/admin/index.php?action=delete_content&amp;id=13" class="delete_content">Delete</a></td>
</tr>

<tr id="row-14">
    <td width="700"><a href="http://local.admin.com/admin/categories_edit.php?id=14">Clothing</a></td>
    <td><a href="http://local.admin.com/admin/index.php?action=delete_content&amp;id=14" class="delete_content">Delete</a></td>
</tr>
</table>

Answer 1

I solved the problem. I followed the tutorial here: http://www.webresourcesdepot.com/dynamic-dragn-drop-with-jquery-and-php/