jquery ui table sortable 带分页

Question

我正在使用 jquery sortable 和 table，它工作正常。当我使用分页时（我通过 ajax post 将数据表项的新顺序保存在数据库中），table 丢失了顺序，只有当我刷新页面时新顺序才会出现（因为我将从数据库中获取实体）如何在使用分页时保持新顺序？

$("tbody").sortable({
        axis:'y',
        placeholder: "ui-state-highlight",
        group: 'no-drop',
        handle: '.drag',
        update: function (event, ui) {

            var videoSortedIDS = $(this).sortable("toArray");
            var ranks = [];
            for (r = pageInfo.start; r < pageInfo.end; r++) {
                ranks.push(r);
            }

            $.post(urlSort, {videoIDS: videoSortedIDS, videoRanks: ranks}, function (data) {
                if (data.responseCode === 200) {
                    console.log(data.sortedEntities);
                } else {
                    alert("Error");
                }
            });
        }
    }).disableSelection();

Answer 1

我找到了解决办法！由于 jquery Sortable 不影响用 Datatable 实例化的对象，我用新内容更新了 Datatable table 中的每一行html table:

table.row(index).data(newRowContent).draw(false);

draw(false) 保存页面状态 ;)

jquery ui table sortable 带分页

jquery ui table sortable with pagination

datatable

pagination

jquery-ui

jquery-ui-sortable