行在数据表上消失了吗? [英] Rows disappearing on Datatables?

问题描述

因此，让我先解释一下我要模仿的内容.在主页上，有一个带有最近表条目的主表.为用户提供了一组收藏夹"文件夹，他们可以在其中从主表拖放表行.而不是拖动整个可见行(我的行很宽，并且很难说出它将放到哪个文件夹中)，我有一个信息"图标，在这种情况下，它是一个向上箭头.用户可以将图标拖放到文件夹中，此时应将其从主表中删除并附加到该收藏夹文件夹中的表中.到目前为止，大多数情况发生在下面的小提琴中(除了未从主表中删除该行).通过使用数据表，问题开始变得明显.将行添加到收藏夹"文件夹后，它显然位于此处，直到您单击分页上的下一个和上一个.它消失了.而且，它似乎从来没有真正成为表的一部分，因为Datatables左下角的信息没有更新.当总共有4个条目时(从用户拖动的行中)显示3个条目中的1到2.我了解要将行添加到数据表中，您需要 fnAddData，但是我不确定如何在这种情况下使用它，有什么想法吗?预先感谢.小提琴: http://jsfiddle.net/YK5fg/4/

So let me first explain what I am trying to emulate. From the home page, there is a main table with recent table entries. The user is given a set of "favorite" folders where they can drag and drop table rows from the main table. Rather than dragging the whole visible row (my rows are rather wide, and it is difficult to tell which folder it will drop into) I have the "information" icon, which in this case is an up arrow. The user can drag the icon and drop it into a folder, when at this point it should be removed from the main table and appended to the table within that favorite folder. So far, most of this is happening in the following fiddle (except the row is not removed from the main table). The problem starts to become apparent with the use of Datatables. After adding the row to the favorite folder, it is clearly there, until you click next and previous on pagination. It disappears. Also, it never seems truly a part of the table because the information on the bottom left of Datatables is not updating. Showing 1 to 2 of 3 entries, when there may be 4 total (from the rows the user dragged). I understand to add rows to Datatables, you need fnAddData but I'm not sure how to use it in this instance, any ideas? Thank in advance. Fiddle: 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

you can use the fnAddTr plug-in http://datatables.net/plug-ins/api to add the cloned 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()的计数会更改，并且图标(可拖动)返回到该行

http://jsfiddle.net/YK5fg/7/
UPDATE
now the count on $(".basic").dataTable() change when you use .fnDeleteRow() and the icon (draggable) return to the row

这篇关于行在数据表上消失了吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！