数据表上的行消失

Rows disappearing on Datatables?

本文关键字：消失 数据表      更新时间：2023-09-26

所以让我先解释一下我试图模仿什么。在主页上，有一个包含最近表条目的主表。用户将获得一组"收藏夹"文件夹，他们可以在其中从主表中拖放表行。我没有拖动整个可见行(我的行相当宽，很难分辨它会放入哪个文件夹(，而是有"信息"图标，在本例中是一个向上箭头。用户可以将图标拖放到文件夹中，此时应将其从主表中删除并附加到该收藏夹文件夹中的表中。到目前为止，大部分情况都发生在以下小提琴中(除了该行未从主表中删除(。随着数据表的使用，问题开始变得明显。将行添加到收藏夹文件夹后，它显然就在那里，直到您在分页时单击下一个和上一个。它消失了。此外，它似乎永远不会真正成为表的一部分，因为数据表左下角的信息没有更新。显示 3 个条目中的 1 到 2 个，而总共可能有 4 个条目(从用户拖动的行中(。我知道要向数据表添加行，您需要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);
                }
              });
您可以使用

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/更新
现在，当您使用 .fnDeleteRow(( 时，$(".basic"(.dataTable(( 上的计数会发生变化，图标(可拖动(返回到行

相关文章：