Question

我使用AJAX请求从控制器获取结果以在数据表中填充它们。结果以JSON格式从控制器返回，但我一直收到Uncaught TypeError: Cannot read property 'length' of undefined错误。

我是否应该在控制器中设置数据表参数？

控制器类：

    @RequestMapping(value = "/users/list", method = RequestMethod.GET, produces = "application/json")
    @ResponseBody
    public List<User> listOfUsers() {
    List<User> usersList;
    usersList = userService.getAllUsers();
    return usersList;
}

百里香的数据表用户界面：

           <div class="table-responsive">
                    <table id="usersTable" class="table table-bordered table-hover dataTable">
                        <thead>
                        <tr>
                            <th th:text="#{user.table.heading.username}">User Name</th>
                            <th th:text="#{systemUser.table.heading.firstname}">First Name</th>
                            <th th:text="#{systemUser.table.heading.lastname}">Last Name</th>
                            <th th:text="#{systemUser.table.heading.status}">Status</th>
                            <th th:text="#{systemUser.table.heading.role}">Role</th>
                        </tr>
                        </thead>
                    </table>
                </div>

AJAX请求：

<script th:inline="javascript">
$(document).ready(function () {
    $('#usersTable').DataTable({
        "processing": true,
        dataType: 'json',
        "ajax": {
            "url": "http://localhost:8080/sample/users/list",
            "type": "GET"
        },
        "columns": [
            {"data": "username"},
            {"data": "firstName"},
            {"data": "lastName"},
            {"data": "status"},
            {"data": "roleName"}
        ]
    })
});
</script>

JSON回复：

[  
 {  
  "id":1,
  "username":"dinesh@example.com",
  "firstName":dinesh,
  "lastName":damian,
  "password":"$2a$10dfgfdgfdgd6O.iO6XB5xcyEZuppAHWOZGwX8m8xCLqS",
  "status":"ACTIVE",
  "role":{  
     "id":1,
     "roleName":"ADMIN",
     "status":"ACTIVE",
     "permissionList":[  
        {  
           "id":1,
           "name":"ROLE_LOGIN",
           "description":"User login permission",
           "checked":false
        }
     ],
     "checkedPermissions":[  

     ]
  }

} ]

Answer 1

通常Cannot read property ‘length’ of undefined表示DataTables无法在响应中找到数据。

使用以下初始化选项来匹配您的响应结构。

$('#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"}
    ]
});

有关详细信息，请参阅ajax.dataSrc。

Answer 2

将AJAX请求更改为此内容后，渲染成功。

<script th:inline="javascript">
$(document).ready(function () {
    $('#usersTable').DataTable({
        "sAjaxSource": "http://localhost:8080/sample/users/list",
        "sAjaxDataProp": "",
        "aoColumns": [
            {"mData": "username"},
            {"mData": "firstName"},
            {"mData": "lastName"},
            {"mData": "status"},
            {"mData": "role.roleName"}

        ]
    })
});
<script th:inline="javascript">

未捕获的TypeError：无法读取属性＆＃39; length＆＃39;未定义的弹簧+百里香叶+数据表

2 个答案: