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

nelsonpim

Angular 4.2.4
Angular-Datatables 4.2.0
datatables 1.10.16
jQuery 3.2.1
Angular-cli 1.4.0
Node 6.11.4
npm 3.10.10

When the data returns back from the server, it's never populated into the table.

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) {
                return JSON.stringify(data);
            }
        },
        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 result from the 'success' callback, but the table does not get populated, and the 'Processing...' also continues to display.

Any Ideas?

Thanks

pheara

I used your script and it works fine.
I think you can try to remove contentType.

this.dtOptions = {
      ajax: {
        url: "your_url",
        type: 'POST'
      },
      columns: [
          {data: 'id', title: 'N°'},
          {data: 'name', title: 'Name'},
          {data: "age", title: 'Age'}
      ],
      processing: true,
      serverSide: true,
      pagingType: 'full_numbers',
      pageLength: 10
    };

Ferdie_Aquino

is this issue resolve? also experiencing the same scenario. thanks

giggal

Facing same issue "I can see the result from the 'success' callback, but the table does not get populated, and the 'Processing...' also continues to display." Refer Code below

getPaymentHistoryPagination() {
this.dtOptions = {
pagingType: 'full_numbers',
serverSide: true,
processing: true,
ajax: {
url: this.baseUrl + '/getPaymentHistoryPagination',
type: 'POST'
}, columns: [
{ data: "customerId", title: 'Departure Time'},
{ data: "customerName", title: 'Customer Name'}
]
};

}

html :

Account ID	Name

Java Controller
@RequestMapping(value = "")
public class AbcController {

@RequestMapping(value = "/getPaymentHistoryPagination", method = RequestMethod.POST)
@ResponseBody
public DataTableResponse getPaymentHistoryPagination1(@RequestBody @Valid SearchPropertyParamDTO dto) {
DataTableResponse dataTableResponse = new DataTableResponse();
try {
dataTableResponse.setDraw(1);
dataTableResponse.setRecordsFiltered(1L);
dataTableResponse.setRecordsTotal(1L);
Invoice invoice = new Invoice();
invoice.setCustomerId(111L);
invoice.setCustomerName("Abc");

        List invoices = new ArrayList();
        invoices.add(invoice);
        dataTableResponse.setData(invoices);
         } catch (Exception ex) {
        //LOG.error("Error in getAllProperty", ex);
      }

return dataTableResponse;
}

giggal

Facing the same issue "I can see the result from the 'success' callback, but the table does not get populated, and the 'Processing...' also continues to display"
html:

Account ID	Nam

Angular 2
getPaymentHistoryPagination() {
this.dtOptions = {
pagingType: 'full_numbers',
serverSide: true,
processing: true,
ajax: {
url: this.baseUrl + '/getPaymentHistoryPagination',
type: 'POST'
}, columns: [
{ data: "customerId", title: 'Departure Time'},
{ data: "customerName", title: 'Customer Name'}
]
};

}

Java Controller

@RequestMapping(value = "/getPaymentHistoryPagination", method = RequestMethod.POST)
@ResponseBody
public DataTableResponse getPaymentHistoryPagination1(@RequestBody @Valid SearchPropertyParamDTO dto) {
    DataTableResponse dataTableResponse = new DataTableResponse();

try {
dataTableResponse.setDraw(1);
dataTableResponse.setRecordsFiltered(1L); //One record for testing
dataTableResponse.setRecordsTotal(1L);

        Invoice invoice = new Invoice();
        invoice.setCustomerId(111L);
        invoice.setCustomerName("Abc");

        List invoices = new ArrayList();
        invoices.add(invoice);
        dataTableResponse.setData(invoices);
    } catch (Exception ex) {
        //LOG.error("Error in getAllProperty", ex);
    }
    return dataTableResponse;
}

public class DataTableResponse {

private int draw =1;
private long recordsTotal ;
private long recordsFiltered ;
   private List data;

}