javascript - Rows disappearing on Datatables? -
so let me first explain trying emulate. home page, there main table recent table entries. user given set of "favorite" folders can drag , drop table rows main table. rather dragging whole visible row (my rows rather wide, , difficult tell folder drop into) have "information" icon, in case arrow. user can drag icon , drop folder, when @ point should removed main table , appended table within favorite folder. far, of happening in following fiddle (except row not removed main table). problem starts become apparent use of datatables. after adding row favorite folder, there, until click next , previous on pagination. disappears. also, never seems part of table because information on bottom left of datatables not updating. showing 1 2 of 3 entries, when there may 4 total (from rows user dragged). understand add rows datatables, need fnadddata i'm not sure how use in instance, 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; $( ) .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); } });
you can use fnaddtr plug-in http://datatables.net/plug-ins/api add cloned tr
$( ".droptarget" ).droppable({ drop: function( event, ui ) { //ui.draggable.hide(); var dropped = parseint($(this).attr('title')) + 1; $( ).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 position of ui.draggable appear inside parent row ui.draggable.css({"top":"0px","left":"0px"}); //get tr dragged var rowid = ui.draggable.parents("tr"); //clone rowid var cloned = rowid.clone(); //make cloned icon draggable cloned.find(".drag").draggable({ revert: "invalid"}); //add coned tr fnaddtr $(".fav1table").datatable().fnaddtr(cloned[0]); //delete rowid fndeleterow add [0] fix redraw error $(".basic").datatable().fndeleterow(rowid[0]); } });
http://jsfiddle.net/yk5fg/7/
update
count on $(".basic").datatable() change when use .fndeleterow() , icon (draggable) return row
Comments
Post a Comment