java - 数据表未显示在 Spring MVC 数据中

Question

我正在尝试从 Spring MVC 获取数据并将其显示在数据表中。 在网页上，数据表正在显示处理过程。 我试图控制台出我的值，并在控制台中显示我的数组。 有人可以帮忙吗？

JSP 表:

<div>
    <table id="myTable" class="table table-bordered table-striped">
        <thead>
            <tr>
                <th class="col-sm-1">Department Id</th>
                <th class="col-sm-3">Department Name</th>
            </tr>
        </thead>
    </table>
</div>

JavaScript 代码:

<script>
 $(document).ready(function () {
       table = $("#myTable").DataTable({
            "processing": true, // for show progress bar
            "serverSide": true, // for process server side
            "filter": false, // this is for disable filter (search box)
            "orderMulti": false, // for disable multiple column at once
            "ajax": {
                "url": "/com-employee-record/department/listDataTable.json",
                "type": "POST",
                "datatype": "json",
                "success" : function(data, i){
                    console.log(data[0]);


                }
            },
               "columns" : [
                    { "data": "department_id"},
                    { "data": "department_name"}
            ]   
        });
    });
</script>

Controller 代码:

@RequestMapping(value = "/listDataTable.json", method = RequestMethod.POST, headers = "Accept=application/json")
@ResponseBody
public List<Department> dataTable(HttpServletRequest request) {
    return departmentService.getDepartments();
}

这是我的控制台显示的内容:

{department_id: 1, department_name: "Information Technology"}

Answer 1

我认为你需要使用:

 "dataSrc": ""

设置，因为你的API response does not have a top level js property called "data".

下面的代码可以运行。

<script src="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/datatables.min.js"></script>

<script>
  $(document).ready(function() {
    $('#example3').DataTable({
      "ajax": {
        "type": "GET",
        "url": 'https://jsonplaceholder.typicode.com/todos',
        "contentType": 'application/json; charset=utf-8',
        "dataSrc": "",
      },
      "columns": [
        {
          "data": "id"
        },
        {
          "data": "title"
        }
      ]
    });
  });
</script>

<table id="example3" class="display" style="width:100%">

</table>