CODEWITHSUNDEEP
angulardatatablesangular-datatables
NelsonPim
NelsonPim

Reputation: 67

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

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

Upvotes: 1

Views: 2379

Answers (1)

davidkonrad
davidkonrad

Reputation: 85558

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.

Upvotes: 1

Related Questions