在数据表表和普通 DOM 表之间移动(添加/删除）tr 行

Move (add/delete) tr rows between datatables table and plain DOM table

本文关键字：添加 删除 tr 之间 数据表 DOM 移动      更新时间：2023-09-26

关于在两个数据表之间移动行，可以找到很多答案。（数据表在表之间移动行）。但是，在一个数据表和一个普通的 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 只能在删除/添加时与 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

相关文章：