Question

我有一个表，里面装有数据库中的数据。该表是可排序的，并使用ajax保存订单。现在，我选择删除选定的行。删除行后，表将用ajax刷新。

现在我唯一的问题是当我删除一行并刷新表时，该表无法再排序（直到刷新）。

有没有办法解决这个问题？

这是我的jquery / ajax代码：

    $(document).ready(function () {
        $('#sortable').sortable({
            axis: 'y',
            update: function (event, ui) {
                var data = $(this).sortable('serialize');

                $.ajax({
                    data: data,
                    type: 'POST',
                    url: 'includes/saveorder.php'
                });
            }
        });
    });

    function deleteFromDatabase(id) {
        if (confirm("Weet u zeker dat u deze pagina wilt verwijderen?")) {
            $.ajax({
                url: "includes/paginas_del.php",
                type: "POST",
                data:'id='+id,
                success: function(data){
                    document.getElementById("alert").style.display = "block";
                    $("#myTable").load("paginas.php #myTable");
                }
            });
        } else {
            document.getElementById("alert").style.display = "none";
        }
    }

这是我的桌子：

<table class="table table-hover table-cust" id="myTable">
          <thead>
            <tr>
                <th scope="col" width="80%">Pagina</th>
                <th width="10%"></th>
                <th width="10%"></th>
            </tr>
          </thead>
          <tbody id="sortable">
            <?php $result = mysql_query("SELECT * FROM pagina WHERE active = '1' ORDER BY sort");
                while ($data = mysql_fetch_assoc($result)) { ?>
                    <tr id="item-<?php echo $data['id'] ?>">
                        <td><a href="paginas_edit.php?pagina_id=<?php print $data['id']; ?>"><?php echo $data['titel'] ?></a></td>
                        <td><a href="paginas_edit.php?pagina_id=<?php print $data['id']; ?>"><i class="fas fa-edit"></i></a></td>
                        <td><a href="javascript:deleteFromDatabase(<?php print $data['id']; ?>)"><i class="fas fa-trash-alt"></i></a></td>
                    </tr>
            <?php } ?>
          </tbody>
        </table>

Answer 1

此问题是由于以下事实引起的：对jquery的load方法的调用是“从服务器加载数据并将返回的HTML放入匹配的元素中”。

这意味着将整个表替换为新表。因此，将旧的<tbody id="sortable">元素替换为新元素，而该元素没有您附加到旧元素上的sortable行为。

在重建表之后，尝试重新运行sortable方法：

function deleteFromDatabase(id) {
    if (confirm("Weet u zeker dat u deze pagina wilt verwijderen?")) {
        $.ajax({
            url: "includes/paginas_del.php",
            type: "POST",
            data:'id='+id,
            success: function(data){
                document.getElementById("alert").style.display = "block";
                $("#myTable").load("paginas.php #myTable");

                $('#sortable').sortable({
                    axis: 'y',
                    update: function (event, ui) {
                        var data = $(this).sortable('serialize');

                        $.ajax({
                            data: data,
                            type: 'POST',
                            url: 'includes/saveorder.php'
                        });
                    }
                });
            }
        });
    } else {
        document.getElementById("alert").style.display = "none";
    }
}

jQuery可排序在Ajax刷新后不起作用

1 个答案: