使用Node.js Express+DataTables无法加载JSON数据，如何解决无匹配记录问题？

看起来你遇到的问题主要来自字段不匹配和数据格式不符合DataTables要求这两个点，下面我一步步帮你排查修复：

问题1：列配置与数据/表头不匹配 #

你当前的代码里存在三处不对应：

• DataTables的columns最后一项配置的是"data": "nicknames"，但你的用户数据里并没有这个字段，对应的字段是test
• HTML表头最后一列是Test，但JS配置里指向了不存在的nicknames
• 这三者（表头、JS列配置、后端数据字段）必须完全对应才能正确渲染

问题2：数据格式与ServerSide模式冲突 #

你开启了serverSide: true，但当前后端返回的是单个JSON对象，而DataTables的服务器端模式要求特定格式的响应（包含分页、总记录数等元数据）；如果只是展示少量静态数据，其实不需要开启服务器端模式。

方案一：关闭ServerSide模式（适合小数据量场景） #

这是最简单的修复方式，适合数据量不大的情况：

1. 修改JavaScript代码
   删掉"serverSide": true，并修正列配置的字段名：

   $(document).ready(function() {
     $('#dataTable').DataTable({
       "processing": true,
       "ajax": {
         "datatype": "json",
         "url": "/users",
         "dataSrc": "" // 因为后端会返回数组，所以直接取响应内容
       },
       "columns": [
         { "data": "name" },
         { "data": "nickname" },
         { "data": "age" },
         { "data": "test" } // 改为和数据匹配的字段名
       ]
     })
   })
   

2. 修改Node.js后端接口
   把返回的单个对象改成数组格式（哪怕只有一条数据）：

   app.get('/users', (req, res) => {
     // 返回数组包裹的用户数据
     res.json([{ name: "Apiphoom", nickname: "Api", age: "23", test: "test" }]);
   });
   

方案二：保留ServerSide模式（适合大数据量/后端分页场景） #

如果需要后端处理分页、排序等逻辑，就要按照DataTables的要求返回标准格式的响应：

1. 修改Node.js后端接口
   返回包含draw、recordsTotal、recordsFiltered、data的标准结构：

   app.get('/users', (req, res) => {
     // 接收DataTables传递的draw参数，原样返回
     const draw = parseInt(req.query.draw || 1);
     // 模拟用户数据
     const userList = [{ name: "Apiphoom", nickname: "Api", age: "23", test: "test" }];
     
     // 构造符合要求的响应
     res.json({
       draw: draw,
       recordsTotal: userList.length, // 总记录数
       recordsFiltered: userList.length, // 过滤后的记录数（无过滤则等于总记录数）
       data: userList // 当前页的数据数组
     });
   });
   

2. 修改JavaScript代码
   修正列字段，并调整ajax的dataSrc（默认取响应里的data字段，可省略）：

   $(document).ready(function() {
     $('#dataTable').DataTable({
       "processing": true,
       "serverSide": true,
       "ajax": {
         "datatype": "json",
         "url": "/users"
         // 省略dataSrc，默认读取response.data
       },
       "columns": [
         { "data": "name" },
         { "data": "nickname" },
         { "data": "age" },
         { "data": "test" } // 匹配数据字段
       ]
     })
   })
   

最后检查 #

打开浏览器控制台的「Network」标签，查看/users接口的返回内容：

• 确保没有404/500错误
• 确保返回的JSON格式和你配置的dataSrc、列字段匹配

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