如何在两个不同的选项卡上同步工作可排序表（jQuery 数据表）答案

【问题标题】：How to work sortable table synchronously on two different tabs (jQuery datatables)如何在两个不同的选项卡上同步工作可排序表（jQuery 数据表）
【发布时间】：2016-03-25 04:43:51
【问题描述】：

如何在两个不同的选项卡（jQuery 数据表）上同步处理可排序表。

这是我的jsfiddle.

$(function() {
    var tabs = $( "#tabs" ).tabs();    
    $( "#summary_body, #detail_body" ).sortable().disableSelection();
});

如果您在摘要选项卡中更改了订单，我想在详细选项卡中自动更改订单。
提前致谢

【问题讨论】：

标签： javascript jquery jquery-ui datatables

【解决方案1】：

我找到了一个与我的问题非常相似的解决方案。

Drag and drop rows in a table with respect to another table

但是，如果我尝试将一行拖放到上方，这些 JSFiddle 答案将无法正常工作。

这是我的解决方法。 JSFiddle

var curPosition;
$(".tableOne tbody").sortable({
 start: function (e, ui) {
    curPosition = $(".tableOne tr:not(.ui-sortable-placeholder)")
                .index($(ui.helper));
    },
beforeStop: function(e, ui) {    
    var rowId = $(ui.helper).attr("data-row-id");

    var newPosition = $(".tableOne tr:not(.ui-sortable-placeholder)")
        .index($(ui.helper));

    var $tableTwoRowToMove = $(".tableTwo tr[data-row-id='" + rowId + "']");

    if (newPosition == 0) {
        $tableTwoRowToMove.insertBefore($(".tableTwo tr").first());
    }
    else {
        if (curPosition > newPosition) {
            $tableTwoRowToMove.insertBefore($(".tableTwo tr").eq(newPosition));
        } else if (curPosition < newPosition) {
            $tableTwoRowToMove.insertAfter($(".tableTwo tr").eq(newPosition));
        }
    }

    // Flash so we can easily see that it moved.
    $(ui.helper)
        .css("background-color", "orange")
        .animate({ backgroundColor: "white" }, 1000);

    $tableTwoRowToMove
        .css("background-color", "yellow")
        .animate({ backgroundColor: "white" }, 1500);

}
});

【讨论】：