Question

因此，让我首先解释一下我想要效仿的内容。在主页上，有一个包含最新表条目的主表。为用户提供了一组“收藏”文件夹，他们可以从主表中拖放表行。而不是拖动整个可见行（我的行相当宽，并且很难分辨它将放入哪个文件夹）我有“信息”图标，在这种情况下是向上箭头。用户可以拖动图标并将其拖放到文件夹中，此时应将其从主表中删除并附加到该收藏夹文件夹中的表中。到目前为止，大部分内容都发生在下面的小提琴中（除了行没有从主表中删除）。使用Datatables时问题开始变得明显。将行添加到收藏夹文件夹后，它显然就在那里，直到您在分页时单击下一个和上一个。它消失了。此外，它似乎永远不会真正成为表的一部分，因为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);
                }
              });

Answer 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/
UPDATE
现在计数$（“。basic”）。dataTable（）在你使用.fnDeleteRow（）和图标（draggable）返回行时改变

行数据消失在Datatables上？

1 个答案: