Spring+Thymeleaf+Datatables报错：Cannot read property 'length' of undefined

这个问题我之前也碰到过，核心原因是Datatables默认期望的JSON响应是一个包含data属性的对象，但你的Controller直接返回了纯用户数组，没有用data字段包裹。当Datatables尝试读取响应里的data属性时，发现它是undefined，自然就会抛出"Cannot read property 'length' of undefined"的错误。

下面给你两种可行的解决方案，根据你的需求选一种就行：

方案一：修改Controller返回标准Datatables格式 #

这种方式更规范，后续如果要加分页、排序功能也更容易扩展。只需要把返回的用户列表包装到一个含data属性的对象里，可以用HashMap或者自定义响应类：

@RequestMapping(value = "/users/list", method = RequestMethod.GET, produces = "application/json")
@ResponseBody
public Map<String, Object> listOfUsers() {
    List<User> usersList = userService.getAllUsers();
    Map<String, Object> response = new HashMap<>();
    response.put("data", usersList); // 把列表放到data字段下
    return response;
}

修改后返回的JSON结构会变成：

{
  "data": [
    {
      "id":1,
      "username":"dinesh@example.com",
      "firstName":"dinesh",
      "lastName":"damian",
      // ... 其他字段
    }
  ]
}

这样Datatables就能正常识别数据源了。

方案二：修改Datatables配置，适配现有返回格式 #

如果不想改Controller，可以在Datatables的AJAX配置里添加dataSrc: ''，告诉它直接使用返回的数组作为数据源，不需要找data字段。另外还要注意你JSON里的roleName是嵌套在role对象里的，之前的列配置写法会找不到这个值，得改成role.roleName：

$(document).ready(function () {
    $('#usersTable').DataTable({
        "processing": true,
        dataType: 'json',
        "ajax": {
            "url": "http://localhost:8080/sample/users/list",
            "type": "GET",
            "dataSrc": "" // 关键配置：直接使用返回的数组
        },
        "columns": [
            {"data": "username"},
            {"data": "firstName"},
            {"data": "lastName"},
            {"data": "status"},
            {"data": "role.roleName"} // 修正嵌套字段的路径
        ]
    })
});

最后提个小细节：你给出的JSON示例里，firstName和lastName的值没有加双引号（比如"firstName":dinesh），这是无效的JSON格式，要确保你的Controller返回的是合法的JSON——字符串类型的字段值必须用双引号包裹，否则也可能导致解析失败哦。

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