DataTable动态添加列异常：无法按数据源生成对应列与数据

问题核心原因 #

1. 数据源集合传递时机错误：先调用drawTable再遍历数据收集数据源名称，导致传给drawTable的sourceValues是空数组，无法生成动态列。
2. 行数据硬编码仅单数据源：当前行数据只取了model.Items[1]（第一个非总计数据源），未遍历所有数据源生成对应列的数值，列数不匹配且数据不全。
3. DataTable初始化逻辑冲突：重复调用table.DataTable()会导致初始化异常，需先销毁已存在的实例再重新创建。

修复后的完整代码 #

1. 修正结果展示代码段

if (result != null && result.status) {
    if (sourceValues.length === 0) {
        return;
    }
    console.log(result.models);

    // 先收集所有非总计的数据源名称
    var sourceNamesSet = new Set();
    result.models.forEach(function (entry) {
        entry.Items.forEach(function (item) {
            if (!item.IsGrandTotal) {
                sourceNamesSet.add(item.SourceName);
            }
        });
    });
    var sourceNames = Array.from(sourceNamesSet);

    // 生成完整的行数据
    var rowsData = [];
    $.each(result.models, function (index, model) {
        if (model.Items && model.Items.length > 1) {
            // 固定Year列
            var rowData = [model.Title];
            // 遍历每个数据源，生成Opps、Bids、Sales、Total
            sourceNames.forEach(function (sourceName) {
                var item = model.Items.find(i => i.SourceName === sourceName);
                if (item) {
                    var total = item.Opps + item.Bids + item.Sales;
                    rowData.push(item.Opps, item.Bids, item.Sales, total);
                } else {
                    // 无数据时填充0
                    rowData.push(0, 0, 0, 0);
                }
            });
            // 添加Grand Total列
            var grandTotalItem = model.Items.find(i => i.IsGrandTotal);
            rowData.push(grandTotalItem ? grandTotalItem.Opps + grandTotalItem.Bids + grandTotalItem.Sales : 0);
            rowsData.push(rowData);
        } else {
            console.error("Model doesn't have the expected structure or Items are missing.");
        }
    });

    // 绘制表头并初始化表格
    marketingReport.drawTable(result, sourceNames);
    var table = $('#marketing-report-grid-new');
    // 销毁旧实例避免重复初始化报错
    if ($.fn.DataTable.isDataTable('#marketing-report-grid-new')) {
        table.DataTable().destroy();
    }
    table.DataTable({
        autoWidth: true,
        data: rowsData
    });
} else {
    // 处理请求失败逻辑
}

2. 修正表格绘制函数

drawTable: function (data, sourceValues) {
    console.log(data);
    console.log(sourceValues);

    var table = $('#marketing-report-grid-new');
    var thead = table.find('thead');
    thead.empty();

    var headerRow = $('<tr>');
    // 固定Year列表头
    headerRow.append($('<th>').text('Year'));

    // 动态生成数据源对应表头
    sourceValues.forEach(function (source) {
        headerRow.append($('<th>').text(`${source} Opps`));
        headerRow.append($('<th>').text(`${source} Bids`));
        headerRow.append($('<th>').text(`${source} Sales`));
        headerRow.append($('<th>').text(`${source} Total`));
    });

    // 添加Grand Total表头
    headerRow.append($('<th>').text('Grand Total'));
    thead.append(headerRow);
}

关键修改说明 #

• 调整执行顺序：先收集所有数据源名称，再生成行数据，最后绘制表头和初始化表格，确保动态列的数据源集合有效。
• 动态行数据生成：遍历每个数据源，通过find匹配对应年份的数据源数据，自动生成对应四列数值，同时处理无数据场景的默认值填充。
• DataTable实例管理：初始化前销毁旧实例，避免重复初始化导致的列不匹配或报错。
• 固定Year列：行数据开头加入年份值，对应表头的固定列，满足需求。

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