0

关于在两个数据表之间移动行有很多答案。（DataTables 在表之间移动行）。然而，事实证明，在一张数据表和一张普通的 DOM 表之间做这件事相当困难。

我有一个数据表：

    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在两者之间切换？

在我将其中一张表切换到数据表之前，这是可以移动 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();
        }
    });

这根本不适用于数据表。

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 回答