如何用JQuery批量将DataTable所有行移至另一表格

1. 添加批量迁移按钮 #

先在页面中添加触发批量操作的按钮：

<button id="btnBatchMove">批量迁移当前页所有行</button>

2. 批量迁移逻辑实现 #

结合你已有的单行迁移逻辑，使用DataTable的API处理批量操作（兼容AJAX加载的分页数据）：

// 绑定批量迁移按钮点击事件
$("#btnBatchMove").on("click", function() {
    // 获取表格A的DataTable实例（AJAX加载的表格必须通过DataTable API操作）
    const candidateTable = $('#tblcandidate').DataTable();
    // 获取当前页面所有显示的行（若要迁移所有分页的行，去掉{ page: 'current' }参数）
    const visibleRows = candidateTable.rows({ page: 'current' }).nodes();

    // 隐藏失败提示
    $(".fail").hide();

    // 遍历处理每一行
    $(visibleRows).each(function() {
        const trItem = $(this);
        // 移除行内的失败复选框列
        trItem.find(".chkCheckBoxIdFail").closest("td").remove();
        // 将行追加到表格B
        $("#tblcandidateprocess").append(trItem);
    });

    // 从表格A的DataTable中移除已迁移的行，保持数据同步并刷新表格
    candidateTable.rows({ page: 'current' }).remove().draw();
});

3. 关键注意事项 #

• 迁移范围控制：默认代码处理当前页的行，若需要迁移所有分页数据，将rows({ page: 'current' })改为rows()即可
• DataTable数据同步：必须通过DataTable的rows().remove().draw()方法移除行，而非直接删除DOM，否则AJAX加载的表格数据会出现不一致
• 表格结构兼容：确保表格B（#tblcandidateprocess）的列结构与表格A的行结构匹配，避免布局错乱
• 原代码优化：你现有单行代码中的trItem.add("<tr>").append("</tr>")是无效操作，建议移除，不影响功能

内容的提问来源于stack exchange，提问作者KimKim