Angular 2 / 4 数据表的服务器端处理不显示数据

Question

Angular 4.2.4 Angular-Datatables4.2.0

Html

<table datatable [dtOptions]="dtOptions"></table>

组件

ngOnInit() {

    this.dtOptions = {
        ajax: {
            url: "http://localhost:8880/nmets/api/manifest/search",
            type: 'POST',
            contentType: 'application/json; charset=UTF-8',
            error: function(xhr, error, code) { console.log(error); },
            success: function(result) {console.log(JSON.stringify(result))},
            data: function(data) {
                data['dto'] = this.manifest;
                return JSON.stringify(data);
            }.bind(this)
        },
        columns: [

            { data: "departureTime", title: 'Departure Time', }

        ],
        processing: true,
        serverSide: true,
        pagingType: 'full_numbers',
        pageLength: 25,
    };
}

当页面加载时，我看到了 table header ("Departure Time") 和 "Processing..." 这个词。我看到 Post 请求，服务器响应如下（缩短）：

服务器响应

{"draw":1,
"recordsTotal":109,
"recordsFiltered":109,
"data":[ 
{"departureTime":"2:18 pm"},
{"departureTime":"2:55 pm"},
{"departureTime":"8:54 pm"},
{"departureTime":"9:10 pm"},
{"departureTime":"12:28 am"},
{"departureTime":"12:33 am"},
...
]}

我可以看到 'success' 回调的结果，但是 table 没有填充，'Processing...' 也继续显示。

有什么想法吗？

谢谢

Answer 1

您的问题是 success 处理程序，请将其删除。你不需要 type 或 contentType :

ajax: {
  url: "http://localhost:8880/nmets/api/manifest/search",
  error: function(xhr, error, code) { console.log(error); },
  data: function(data) {
    data['dto'] = this.manifest;
    return JSON.stringify(data);
  }.bind(this)
},

绝不能覆盖 success 处理程序，因为它由 DataTables 在内部使用。如果您需要成功处理程序，请改用 dataSrc 回调。请参见 https://datatables.net/reference/option/ajax#Types

contentType 是多余的，因为 DatTables 无论如何都会尝试解析响应。您可以设置 type，这不是错误，但如果没有特别需要 POST 请求，它只是垃圾。

Angular 2 / 4 数据表的服务器端处理不显示数据

Angular 2 / 4 Server Side Processing for Datatables not displaying data

datatables

angular-datatables

angular