jQuery DataTable无法填充表格问题求助

云原生阿岚

2026-5-9

解决jQuery DataTable能获取数据但表格不填充的问题

我来帮你梳理下排查方向，你已经搞定了$ is not defined的问题，而且控制台能拿到数据，说明AJAX请求是通的，表格不填充大概率是数据映射、配置冲突或者格式匹配的小问题，咱们一步步来：

检查字段名的大小写与拼写一致性
注意你的HTML表头用的是Nome_tecnico（首字母大写的Pascal命名），但DataTable配置里的data字段是nome_tecnico（全小写）。如果后端返回的JSON字段名是和HTML一致的Pascal命名，那这里就会匹配失败，导致数据无法渲染。一定要确保后端返回的字段名和columns里的data值完全一致（包括大小写）。

移除AJAX配置中的success回调
DataTable有自己内置的数据处理流程，你手动添加的success回调会覆盖它的默认逻辑，导致拿到数据后不会自动填充到表格里。直接删掉这个回调函数，让DataTable自己处理返回的数据：

ajax: {
    url: "/Home/AttivitaDelTecnicoo?nome=" + nome,
    type: "GET",
    contentType: "application/json",
    data: function (d) {
        return JSON.stringify(d);
    },
    error: function (xhr, ajaxOptions, thrownError) {
        console.log(xhr, thrownError)
    }
    // 删掉这里的success回调
},

确认后端返回的数据格式
因为你设置了serverSide: false，DataTable默认期望后端返回的是直接的数组格式（比如[{nome_tecnico: "张三", ...}, ...]）。如果后端返回的是包裹在某个对象里的数组（比如{data: [数组内容]}），那你需要在AJAX配置里指定dataSrc来告诉DataTable去哪里取数据：
```
ajax: {
    // 其他配置不变
    dataSrc: "data" // 这里填后端返回的数组所在的字段名
}
```
你可以看一下控制台console.log(data)的输出结构，判断是否需要加这个配置。
修正表头与columns的顺序匹配
我发现你的HTML表头顺序和columns配置的顺序不一致！比如：
- HTML里第7个表头是Ore_mensili，第12个是Ore_quotidiano
- 但columns里第7个是ore_quotidiano，第8个是ore_mensili
  这种顺序不匹配会导致数据填充到错误的列，甚至看起来像没数据。一定要把columns的顺序和HTML的顺序完全对应。
清理重复的配置项
你的DataTable配置里写了两次destroy: true，虽然不影响功能，但建议删掉一个，保持代码整洁。

按照这些点调整后，应该就能看到数据正常填充到表格里了。

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