Rows disappearing on Datatables?

Question

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);
                }
              });

Answer 1

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/
UPDATE
now the count on $(".basic").dataTable() change when you use .fnDeleteRow() and the icon (draggable) return to the row