如何使用jQuery将JSON对象数据正确映射绑定到DataTables

你当前代码存在4个核心问题，直接触发DataTables参数未知报错：

• 接口返回的是对象数组，你错误使用JSON.stringify()把它转成了字符串传入渲染函数，字符串类型数据无法读取uploadStatus、labName这类对象属性
• 没有遍历返回的数组，直接尝试从整个数组的根节点读取单条记录的字段，逻辑上无法拿到正确值
• DataTables未配置列映射规则时，默认会按数组下标（即报错提示里的参数0）匹配列数据，你传入的数据格式和表格预期完全不匹配
• 重复调用表格销毁、清空方法，执行顺序混乱，容易引发表格实例冲突

首先确保你的HTML表格结构正确，提前定义好两列表头：

<table id="tableBody" class="display" style="width:100%">
  <thead>
    <tr>
      <th>上传状态</th>
      <th>实验室名称</th>
    </tr>
  </thead>
</table>

然后修正JS逻辑，移除不必要的JSON字符串转换，配置正确的列字段映射，理顺表格实例的生命周期逻辑：

// 存储表格实例，避免重复初始化冲突
let labTable = null;

$.ajax({
    type: 'GET',
    contentType: "application/json; charset=utf-8",
    url: 'api/getuploadbydistricts/'+this.name,
    success: function (data) {
        // 直接传入接口返回的原生数组对象，不要做JSON.stringify转换
        populateDataTable(data);
    },
    error: function (e) {
        console.log("请求执行失败");
        console.log("错误详情: " + JSON.stringify(e));
    }
});

// 表格渲染函数
function populateDataTable(dataList) {
    console.log("开始加载表格数据，共获取到" + dataList.length + "条记录");
    // 已存在初始化过的表格实例时，先销毁旧实例
    if ($.fn.DataTable.isDataTable('#tableBody')) {
        $('#tableBody').DataTable().destroy();
    }
    // 清空表格残留内容
    $('#tableBody').empty();
    
    // 初始化表格，配置列和数据源字段的映射关系，批量加载全量数据
    labTable = $('#tableBody').DataTable({
        data: dataList,
        columns: [
            { data: 'uploadStatus' }, // 第一列绑定uploadStatus字段
            { data: 'labName' }       // 第二列绑定labName字段
        ]
    });
}

如果需要把uploadStatus的数字状态值转为可读的中文文本，可以在列配置中添加render函数做格式化，示例如下：

columns: [
    { 
        data: 'uploadStatus',
        render: function(value) {
            const statusText = {
                0: '未上传',
                1: '上传成功',
                2: '上传失败'
            };
            return statusText[value] || '状态未知';
        }
    },
    { data: 'labName' }
]

不需要手动调用fnAddData逐行插入数据，初始化时直接把全量数组传给data配置项，DataTables会自动完成批量渲染，性能比逐行插入更好。

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