Переместить (добавить / удалить) строки tr между таблицей данных и простой таблицей DOM

0

Есть довольно несколько ответов, которые можно найти о перемещении строк между двумя типами данных. (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

1 ответ

0

Решение заняло у меня некоторое время, прежде чем я понял, что 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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню