API返回JSON数据追加至DataTable时全部归入同一列的问题求助

问题根源 #

当前代码存在两个核心问题导致数据挤入同一列：

1. 直接向<table>元素追加<td>标签，未用<tr>包裹每一行数据，DOM结构不符合表格规范，浏览器解析后出现错乱
2. 未对应表格的三列（ID、File Name、Action）填充字段，只是把返回值直接塞入单元格

修正方案 #

保留原有HTML结构不变，修改Fetch请求的回调逻辑，确保每一行数据用<tr>包裹，并对应列填充字段：

修正后的JavaScript代码

fetch('https://e728-185-202-239-227.ngrok.io/pakgentext/getFilesByPath/?path='+product , {
    method: "GET",
    headers : {
        'Content-Type' : 'application/json'
    },
})
.then((response) => response.json())
.then((resp) => {
    console.log(resp);
    if(resp.message == "Success" ){
        // 清空tbody避免重复加载（可选）
        $("#tbodydata").empty();
        $.each(resp.doc, function (index, item) { 
            // 构建完整的行HTML，对应表格三列
            let rowHtml = `
                <tr>
                    <td>${item.id}</td>
                    <td>${item.fileName}</td>
                    <td>
                        <button class="btn btn-sm btn-primary">查看</button>
                        <button class="btn btn-sm btn-secondary">下载</button>
                    </td>
                </tr>
            `;
            // 追加到指定tbody中
            $("#tbodydata").append(rowHtml);
        });
        // 若已初始化DataTable，调用draw更新视图（保留分页排序状态）
        $('#table1').DataTable().draw(false);
    }else{
        // 失败提示
        $("#tbodydata").html('<tr><td colspan="3">获取文件列表失败</td></tr>');
    }
})
.catch(error => {
    console.error('请求出错:', error);
    $("#tbodydata").html('<tr><td colspan="3">请求出错，请稍后重试</td></tr>');
});

关键修正说明 #

• 用<tr>包裹每行的三个<td>，确保表格DOM结构合法
• 定位到<tbody id="tbodydata">追加行，而非直接操作整个table
• 每个<td>对应表格列，填充JSON返回的对应字段（如item.id对应ID列）
• 增加错误捕获和状态提示，提升页面健壮性
• 若已初始化DataTable，调用draw(false)刷新视图，避免重置分页和排序

内容的提问来源于stack exchange，提问作者Smitty's