Spring MVC数据中未显示数据表

时间:2018-12-02 20:48:27

标签: java jquery spring-mvc jsp datatable

我正在尝试从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>

控制器代码:

@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"}

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

一切似乎都很好,只需将代码的JDK 1.8.0_40部分更改为此

ajax
您的代码中缺少

"ajax": { "url": "/com-employee-record/department/listDataTable.json", "type": "POST", "contentType": "application/json", "dataSrc" : "[]" }, 。无需成功阻拦。