DataTable删除行后新增行时已删除行重复出现问题求助

核心问题 #

你遇到的已删除行在新增时复现的问题，根源在于手动DOM操作与DataTable API混用，以及数据维护逻辑不一致：

1. 重复初始化与数据添加：每次新增行时，既调用initializeDataTable重新初始化DataTable（会覆盖当前表格内容），又调用appendRowToDataTable手动添加行，导致数据重复且数据源与界面不同步。
2. ID维护逻辑错误：删除行时通过重新获取DOM行ID更新uniqueRowIds，而非直接移除对应ID，一旦DataTable重建DOM，已删除的ID会被重新生成复用，造成旧行“复活”的错觉。
3. 数据源不同步：手动删除DOM行后，DataTable内部数据源未同步更新，重新初始化时会再次加载旧数据。

修复方案 #

1. 统一使用DataTable API操作行 #

停止手动DOM操作，改用DataTable官方API维护表格，确保数据源与界面完全同步：

初始化DataTable并保存实例

// 全局保存DataTable实例，避免重复初始化
var noteTable;

function initializeDataTable(initialData) {
    // 若表格已初始化，直接返回实例
    if ($.fn.DataTable.isDataTable('#tblCreateNoteManually')) {
        noteTable = $('#tblCreateNoteManually').DataTable();
        return;
    }
    // 初始化DataTable，配置列与渲染规则
    noteTable = $('#tblCreateNoteManually').DataTable({
        data: initialData || [],
        columns: [
            { data: 'Product', defaultContent: '' },
            { data: 'Project', defaultContent: '' },
            { data: 'WBSElement', defaultContent: '' },
            { data: 'DRGNo', defaultContent: '' },
            { data: 'MaterialNo', defaultContent: '' },
            { data: 'DrgTotalQty', defaultContent: 0 },
            { data: 'OrderQuantity', defaultContent: 0 },
            { data: 'UAAuxQTy', defaultContent: 0 },
            { data: 'AuxBalanceQty', defaultContent: 0 },
            { data: 'UALogQTy', defaultContent: 0 },
            { data: 'LogBalanceQty', defaultContent: 0 },
            { 
                data: 'Qty', 
                render: function(data) {
                    return `<input type="text" class="form-control qty-input" placeholder="Quantity" oninput="validateInput(this)" value="${data || ''}" />`;
                }
            },
            { 
                data: 'Remarks', 
                render: function(data) {
                    return `<input type="text" class="form-control remarks-input" placeholder="Remarks" value="${data !== null ? data : ''}" />`;
                }
            },
            { 
                data: null, 
                render: function(data, type, row, meta) {
                    var rowId = `row_${Date.now()}_${meta.row}`; // 生成唯一ID，避免重复
                    uniqueRowIds.push(rowId);
                    return `<button type="button" class="btn btn-danger btn-sm" onclick="deleteRownew('${rowId}', ${meta.row})"><i class="fa fa-close"></i></button>`;
                }
            }
        ],
        responsive: true,
        autoWidth: false
    });
}

// 页面加载时初始化空表格
$(document).ready(function() {
    initializeDataTable([]);
});

修改新增行函数，使用DataTable API添加

function appendRowToDataTable(data) {
    if (!noteTable) {
        initializeDataTable(data);
        return;
    }
    // 向DataTable添加新行并刷新界面
    noteTable.row.add(data[0]).draw(false); // false参数避免重置分页
}

修改删除行函数，同步更新数据源

function deleteRownew(rowIdToDelete, rowIndex) {
    $('#confirmationModal').modal('show');

    $('#confirmDeleteBtn').off('click').on('click', function () {
        // 通过行索引删除DataTable中的行，同步更新数据源
        noteTable.row(rowIndex).remove().draw();
        
        // 从uniqueRowIds中移除对应ID
        uniqueRowIds = uniqueRowIds.filter(id => id !== rowIdToDelete);

        $('#confirmationModal').modal('hide');
        $('#confirmDeleteBtn').off('click');
    });
}

2. 移除重复数据添加逻辑 #

修改GetdatafromDUNo的success回调，删除重复的表格初始化调用，只保留新增行逻辑：

function GetdatafromDUNo(selectedValue) {
    var Entity = { DUNo: selectedValue };

    $.ajax({
        url: '../HandoverNote/GetDetailfromDUNo/',
        data: JSON.stringify(Entity),
        dataType: "json",
        type: "POST",
        contentType: "application/json",
        success: function (data) {
            if (data) {
                console.log("Received data from server:", data);
                populateTable(data);
                // 仅调用API添加新行，不再重复初始化表格
                appendRowToDataTable(data);
            } else {
                console.log("No data received from server.");
            }
        },
        error: function (error) {
            console.error("Error in AJAX request:", error);
        }
    });
}

3. 调整populateTable函数，仅处理状态提示 #

function populateTable(data) {
    if (data && data.length > 0) {
        console.log(data);

        if (data.DUNosNotUploaded && data.DUNosNotUploaded !== '') {
            toastr.error("Error: MaterialNo values not found for JTCDataMaster. MaterialNo(s): " + data.DUNosNotUploaded);
        }

        // 移除initializeDataTable调用，表格已在页面加载时初始化
        if (data.jtcdataListFinal == null) {
            $("#pUploadStatus").html("No records found in the file.");
            $("#pUploadStatus").removeClass("hidden").removeClass("bg-danger").addClass("bg-success");
        } else {
            $("#pUploadStatus").html("File uploaded successfully.");
            $("#pUploadStatus").removeClass("hidden").removeClass("bg-success").addClass("bg-danger");
        }
    } else {
        console.log("Empty data received from server.");
    }
}

关键优化点 #

• 使用Date.now()生成唯一行ID，彻底避免ID重复问题。
• 用DataTable的row.add()和row().remove()方法操作行，确保数据源与界面同步。
• 仅初始化一次DataTable，后续操作均基于已有实例，避免重复渲染导致的旧数据复现。

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