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

Question

Angular 4.2.4 Angular-Datatables 4.2.0

Html

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

Component

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,
    };
}

When the page loads I see the table header ("Departure Time") and I see the word "Processing...". I see the Post request and the server responds as follows (shortened):

Server Response

{"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"},
...
]}

I can see the results from the 'success' callback, but the table does not get populated, and the 'Processing...' also continues to display.

Any Ideas?

Thanks

Try replacing this data['dto'] = this.manifest; to this: { ...data, dto: this.manifest }.And don't stringify the return, just do return data. — SrAxi
– SrAxi, Commented Nov 14, 2017 at 15:43
That code is inside a function, not inside an object. If I do that I will get a compilation error. Besides, the data is going to the server as expected, if I don't stringify it,it will not send the request body in json format, which is what the format expected by the server. My understanding is that the 'data' property is used for the request, not to handle the server response. — NelsonPim
– NelsonPim, Commented Nov 14, 2017 at 16:03
Yes, you are right. My bad. That callback indeed is intercepting the request object being sent to the server... Have you tried posting this issue in the DataTables forum? As an alternative,I could purpose to use this library that does the same but is fully supported and integrated with Angular: ag-grid.com — SrAxi
– SrAxi, Commented Nov 15, 2017 at 8:31

davidkonrad · Accepted Answer · 2017-11-24 21:18:14Z

1

Your problem is the success handler, remove that. You dont need type or contentType either :

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)
},

The success handler must never be overwritten since it is used internally by DataTables. If you need a success handler use the dataSrc callback instead. See https://datatables.net/reference/option/ajax#Types

contentType is redundant since DatTables will try to parse the response anyway. You could set type, it is not an error, but if there is no particular need for a POST request it is just garbage.

answered Nov 24, 2017 at 21:18

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

NelsonPim Over a year ago

Thanks, It worked. I didn't realize I was overriding the success callback. I was just using it for debugging purposes.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related