Javascript 数据表上的行消失？

因此，让我首先解释一下我试图效仿的是什么。在主页上，有一个主表，其中包含最近的表条目。给用户一组“收藏夹”，用户可以在其中从主表拖放表行。我没有拖动整个可见行（我的行很宽，很难判断它将放入哪个文件夹），而是使用了“信息”图标，在本例中是一个向上箭头。用户可以将图标拖放到文件夹中，此时应将其从主表中删除并附加到该收藏夹中的表中。到目前为止，大多数情况都发生在下面的fiddle中（除了没有从主表中删除行之外）。随着数据表的使用，问题开始变得明显。将行添加到收藏夹后，它显然就在那里，直到在分页时单击“下一步”和“上一步”。它消失了。而且，它似乎从来都不是表的一部分，因为Datatables左下角的信息没有更新。显示3个条目中的1到2个，总共可能有4个条目（来自用户拖动的行）。我知道要向数据表添加行，您需要 fnAddData但我不知道如何在这个例子中使用它，有什么想法吗？先谢谢你。小提琴：

---

您可以使用fnAddTr插件添加克隆的tr

$( ".dropTarget" ).droppable({
drop: function( event, ui ) {
    //ui.draggable.hide();
    var dropped = parseInt($(this).attr('title')) + 1;
    $( this ).attr('title',dropped+' entries'); 
    var delay =  $(this);
    delay.prop('disabled', true).addClass('ui-state-highlight')
    setTimeout(function() {
    delay.prop('disabled', false).removeClass('ui-state-highlight');
    }, 2000);

        //return the position of the ui.draggable to appear inside the parent row
        ui.draggable.css({"top":"0px","left":"0px"});
        //get the tr dragged
        var rowId = ui.draggable.parents("tr");
        //clone rowId 
        var cloned = rowId.clone();
        //make the cloned icon draggable
        cloned.find(".drag").draggable({ revert: "invalid"});
        //add coned tr with fnAddTr
        $(".fav1table").dataTable().fnAddTr(cloned[0]);
        //delete rowId with fnDeleteRow  add [0] to fix the redraw error 
        $(".basic").dataTable().fnDeleteRow(rowId[0]);
    }
});    

更新

---

现在，使用.fnDeleteRow（）时，$（“.basic”）.dataTable（）的计数会发生变化，图标（draggable）会返回到行

这是一个巨大的进步，但在删除行时，初始主表分页不会更新。另外，我可以保留图标和行吗？如果用户希望继续将其移动到不同的文件夹中，请执行以下操作。几乎完美。问题是，一旦将一行添加到收藏夹文件夹中，并且用户决定再次将其移动（在本例中是移回主文件夹），即使删除了行，也会追加收藏夹表。我把小提琴改了一点，以便更好地模仿家乡和最爱。您需要创建两个不同的函数，一个用于.home，另一个用于.folder1，就像这样，或者您可以使用一些数据属性将tr附加到正确的表中，就像这样，只使用一个functionlet

$( ".dropTarget" ).droppable({
drop: function( event, ui ) {
    //ui.draggable.hide();
    var dropped = parseInt($(this).attr('title')) + 1;
    $( this ).attr('title',dropped+' entries'); 
    var delay =  $(this);
    delay.prop('disabled', true).addClass('ui-state-highlight')
    setTimeout(function() {
    delay.prop('disabled', false).removeClass('ui-state-highlight');
    }, 2000);

        //return the position of the ui.draggable to appear inside the parent row
        ui.draggable.css({"top":"0px","left":"0px"});
        //get the tr dragged
        var rowId = ui.draggable.parents("tr");
        //clone rowId 
        var cloned = rowId.clone();
        //make the cloned icon draggable
        cloned.find(".drag").draggable({ revert: "invalid"});
        //add coned tr with fnAddTr
        $(".fav1table").dataTable().fnAddTr(cloned[0]);
        //delete rowId with fnDeleteRow  add [0] to fix the redraw error 
        $(".basic").dataTable().fnDeleteRow(rowId[0]);
    }
});