Строки, исчезающие по Datatables?

Question

Итак, позвольте мне сначала объяснить, что я пытаюсь подражать. На главной странице есть основная таблица с последними записями в таблице. Пользователю предоставляется набор «любимых» папок, в которых они могут перетаскивать строки таблицы из основной таблицы. Вместо того, чтобы перетаскивать всю видимую строку (мои строки довольно широкие, и трудно определить, в какую папку она попадет). У меня есть значок «информация», который в этом случае является стрелкой вверх. Пользователь может перетащить значок и отбросить его в папку, когда на этом этапе его следует удалить из основной таблицы и добавить в таблицу в этой избранной папке. Пока что большая часть этого происходит в следующем скрипке (кроме строки не удаляется из основной таблицы). Проблема начинает становиться очевидной с использованием Datatables. После добавления строки в любимую папку, она явно там, пока вы не нажмете следующий и предыдущий на разбиении на страницы. Он исчезает. Кроме того, он никогда не кажется действительно частью таблицы, потому что информация в левом нижнем углу Datatables не обновляется. Отображение от 1 до 2 из 3 записей, когда может быть 4 всего (из строк, которые пользователь перетаскивал). Я понимаю, что добавить строки в Datatables, вам нужно fnAddData, но я не уверен, как использовать его в этом случае, какие-нибудь идеи? Заранее спасибо. 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); 
       } 
       }); 

Answer 1

вы можете использовать fnAddTr плагин http://datatables.net/plug-ins/api добавить клонированный тр

$(".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
теперь рассчитывать на $ DataTable(), когда вы используете .fnDeleteRow(), и значок (перетаскиваемый) возвращается к строке