行数据消失在Datatables上？

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