Есть довольно несколько ответов, которые можно найти о перемещении строк между двумя типами данных. (DataTables перемещает строки между таблицами). Тем не менее, сделать это между одной datatable и одной простой таблицей DOM оказалось довольно борьбой.
У меня есть один Datatable:
var colcount = $("#uitschrdiv").children("thead > tr:first").children().length;
dtable = $("#uitschrdiv").dataTable({
"oLanguage": {
"sUrl": "/css/datatables/nl.txt"
},
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [colcount - 1] }
],
"iDisplayLength": 25,
"aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "Alles"]],
"sPaginationType": "full_numbers",
"bStateSave": true,
"iCookieDuration": 60 * 30 /* 30min */
});
У меня есть одна нормальная таблица DOM с именем #inschrdiv
каждая из них имеет кнопку в последнем td
чтобы переместить строку в другую таблицу. Как переключить tr
между двумя из них?
прежде чем я переключил одну из таблиц на данные, это был jQuery, который переместил бы TR
$(".uitschrbut").live("click", function () {
if ($(this).hasClass("inactivebtn")) {
//werkt niet
return false;
} else {
$(this).removeClass("uitschrbut").addClass("inschrbut").val("inschrijven");
$("#uitschrdiv").append($(this).parent().parent());
checkInEnUitschrMax();
}
});
$(".inschrbut").live("click", function () {
if ($(this).hasClass("inactivebtn")) {
//werkt niet
return false;
} else {
$(this).addClass("uitschrbut").removeClass("inschrbut").val("uitschrijven");
$("#inschrdiv").append($(this).parent().parent());
checkInEnUitschrMax();
}
});
это вообще не работает с Datatables.
Решение заняло у меня некоторое время, прежде чем я понял, что Datatables может работать только с объектами DOM при удалении/добавлении и не обрабатывать объекты jQuery.
Это то, с чем я столкнулся:
$(".uitschrbut").live("click", function () {
if ($(this).hasClass("inactivebtn")) {
//werkt niet
return false;
} else {
$(this).removeClass("uitschrbut").addClass("inschrbut").val("inschrijven");
var jrow = $(this).parents("tr");
jrow.detach(); //you need to detach this because if the datatable has a filter applied in search, it will stay in this table until the filter fits the data in this row. It would only then be moved to the datatable.
dtable.fnAddTr(jrow[0]); //used plugin, see below, jrow[0] gets the DOM of jrow
checkInEnUitschrMax();
}
});
$(".inschrbut").live("click", function () {
if ($(this).hasClass("inactivebtn")) {
//werkt niet
return false;
} else {
$(this).addClass("uitschrbut").removeClass("inschrbut").val("uitschrijven");
var row = $(this).parent().parent()[0]; //the [0] gets the native DOM elem
$("#inschrdiv tbody").append(row); //append the DOM element to the other table
dtable.fnDeleteRow(row); //delete this row from the datatable
checkInEnUitschrMax();
}
});
Вам понадобится плагин fnAddTr
который можно найти здесь: http://datatables.net/plug-ins/api#fnAddTr
Если вы хотите добавить несколько строк сразу, вы можете использовать этот плагин, который позволяет вам, по-видимому, сразу добавлять целые таблицы DOM в datatable: http://datatables.net/forums/discussion/comment/31377#Comment_31377