Question

关于在两个数据表之间移动行，可以找到相当多的答案。（DataTables move rows between tables）。但是，在一个数据表和一个普通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 */
    });

我有一个名为#inschrdiv

的普通DOM表

每个人在最后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();
        }
    });

这与Datatables完全没有关系。

Answer 1

在我理解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

在datatables表和plain DOM表之间移动（添加/删除）tr行

1 个答案: