Поэтому позвольте мне сначала объяснить, что я пытаюсь подражать. На главной странице есть основная таблица с последними записями в таблице. Пользователю предоставляется набор "любимых" папок, в которых они могут перетаскивать строки таблицы из основной таблицы. Вместо того, чтобы перетаскивать всю видимую строку (мои строки довольно широкие, и трудно определить, в какую папку она попадет). У меня есть значок "информация", который в этом случае является стрелкой вверх. Пользователь может перетащить значок и отбросить его в папку, когда на этом этапе его следует удалить из основной таблицы и добавить в таблицу в этой избранной папке. Пока что большая часть этого происходит в следующем скрипке (кроме строки не удаляется из основной таблицы). Проблема начинает становиться очевидной с использованием Datatables. После добавления строки в любимую папку, она явно там, пока вы не нажмете следующий и предыдущий на разбиении на страницы. Он исчезает. Кроме того, он никогда не кажется действительно частью таблицы, потому что информация в левом нижнем углу Datatables не обновляется. Отображение от 1 до 2 из 3 записей, когда может быть 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);
}
});
вы можете использовать плагин 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/
ОБНОВИТЬ
теперь подсчет на $ (". basic"). dataTable() изменяется, когда вы используете.fnDeleteRow(), и значок (перетаскиваемый) возвращается к строке