0

因此，让我首先解释一下我要模仿的内容。在主页上，有一个包含最近表条目的主表。用户将获得一组“最喜欢的”文件夹，他们可以在其中从主表拖放表行。而不是拖动整个可见行（我的行相当宽，而且很难分辨它将放入哪个文件夹）我有“信息”图标，在这种情况下是一个向上箭头。用户可以将图标拖放到文件夹中，此时应将其从主表中删除并附加到该收藏夹中的表中。到目前为止，大部分情况都发生在下面的小提琴中（除了该行没有从主表中删除）。随着数据表的使用，问题开始变得明显。将该行添加到收藏夹文件夹后，它显然在那里，直到您在分页上单击下一个和上一个。它消失了。此外，它似乎永远不会真正成为表格的一部分，因为 Datatables 左下角的信息没有更新。显示 3 个条目中的 1 到 2 个，可能总共有 4 个（来自用户拖动的行）。我知道要向 Datatables 添加行，您需要 fnAddData 但我不确定如何在这种情况下使用它，有什么想法吗？预先感谢。小提琴：http://jsfiddle.net/YK5fg/4/

$( ".drag" ).draggable({ revert: "invalid" });

              $( ".dropTarget" ).droppable({
                drop: function( event, ui ) {
                  // fade out dropped icon      
                  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)

                      var rowId = ui.draggable.prop("id");
                      var cloned = $(".basic").find("tr#"+rowId).clone();
                      $(".fav1table").append(cloned);
                }
              });
4

1 回答 1

1

您可以使用 fnAddTr 插件http://datatables.net/plug-ins/api添加克隆的 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]);
    }
});

http://jsfiddle.net/YK5fg/7/
现在 更新
$(".basic").dataTable() 的计数在您使用 .fnDeleteRow() 和图标（可拖动）返回行时发生变化

于 2013-09-24T17:41:39.270 回答