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

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

这是我的

---

如果您在“摘要”选项卡中更改了顺序，我希望在“详细信息”选项卡中自动更改顺序。
提前感谢

我发现了一个与我的问题非常类似的解决方案

然而，如果我试图拖动一行并将其放在上面，这些JSFIDLE答案并不能很好地工作

这是我的解决办法

var-curPosition；
$（“.tableOne tbody”）。可排序({
开始：功能（e、ui）{
curPosition=$（“.tableOne tr:not（.ui排序占位符）”）
.index（$（ui.helper））；
},
beforeStop：函数（e，ui）{
var rowId=$（ui.helper）.attr（“数据行id”）；
var newPosition=$（“.tableOne tr:not（.ui排序占位符）”）
.index（$（ui.helper））；
var$tableTwoRowToMove=$（“.tableTwo tr[data row id='“+rowId+”]）；
if（newPosition==0）{
$tableTwoRowToMove.insertBefore（$（“.tabletwow tr”）.first（））；
}
否则{
如果（当前位置>新位置）{
$tableTwoRowToMove.insertBefore（$（“.tableTwo tr”）.eq（newPosition））；
}否则如果（当前位置<新位置）{
$tableTwoRowToMove.insertAfter（$（“.tableTwo tr”）.eq（newPosition））；
}
}
//闪光，这样我们就可以很容易地看到它移动了。
$（ui.helper）
.css（“背景色”、“橙色”）
.animate（{backgroundColor:“white”}，1000）；
$tableTwoRowToMove
.css（“背景色”、“黄色”）
.animate（{backgroundColor:“white”}，1500）；
}
});

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

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);

}
});