0

2 つのデータテーブル間で行を移動する方法については、いくつかの答えが見つかります。( DataTables はテーブル間で行を移動します)。ただし、1 つのデータテーブルと 1 つのプレーンな DOM テーブルの間でこれを行うのは非常に困難であることがわかっています。

私は1つのデータテーブルを持っています:

    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テーブルが1つあります#inschrdiv

それぞれの最後tdのテーブルには、行を他のテーブルに移動するためのボタンがあります。2つの間でを切り替えるにはどうすればよいtrですか?

テーブルの1つをデータテーブルに切り替える前は、これがTRを移動するjQueryでした

    $(".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 ではまったく機能しません。

4

1 に答える 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 テーブル全体を一度にデータテーブルに追加できます: http://datatables.net/forums/discussion/comment/31377#Comment_31377

于 2013-10-22T04:40:28.170 に答える