CODEWITHSUNDEEP
javascriptangularjsajaxangular-datatables
Ryan
Ryan

Reputation: 6057

Is there a callback for when an Angular DTOptionsBuilder ajax call finishes?

I am using angular datatables and I have some code that looks like this:

this.dtOptions = DTOptionsBuilder.newOptions()
    .withOption('ajax', {
        type: 'POST',
        contentType: 'application/json',
        processData: false,
        beforeSend: function(xhr, settings) {
            ...
        },
        data: function(data) {
            ...
        }
    })
    .withDataProp('data')
    .withOption('processing', true)
    .withOption('serverSide', true);

That all works properly and the table on the page is populated with data when the ajax call returns. All I want to do now is detect when that ajax call completes. I have tried to use this right below beforeSend:

success: function(data, textStatus, jqXHR, fnCallback) {
    console.log(data);
}

That actually prints the returned data to the console, but when I add that success callback the table on the page never populates with the data. So how can I have a callback fire when the ajax is done and still have my table on the page populate with data like it normally does?

Upvotes: 1

Views: 3488

Answers (1)

davidkonrad
davidkonrad

Reputation: 85558

dataTables is using the ajax success callback internally, so you break things up if you override that. However, dataTables introduces its own dataSrc callback which is fired from within dataTables success handler to give you the upportunity to manipulate the response before any data is inserted :

this.dtOptions = DTOptionsBuilder.newOptions()
  .withOption('ajax', {
     dataSrc: function(json) {
       //success!
       console.log(json);
       return json
     },
     type: 'POST',
     contentType: 'application/json',
     processData: false,
     ....

see demo -> http://plnkr.co/edit/94EWyDanIawCJJgyagiy?p=preview

As you may see in the demo, you also have an alternative in the ajax complete callback :

ajax : {
  complete: function(jqXHR, textStatus) {
    console.log(jqXHR.responseText)
  } 
  ..
}

Upvotes: 3

Related Questions