ajax success function not working on datatable

Question

I'm using datatable to show list from database mysql

I need to update some input on end of table loading, then I'm using success function but this seems to prevent data rendering

var table = $('#example').DataTable({
'processing': true,
'serverSide': true,
'ajax': {
  type: 'POST',
  'url': url,
  'data': function (d) {
    console.log(d.order);
    return JSON.stringify( d );
  },

  // EDIT this "my" success function
  success: function( data ) {
    $('#my_input').val(data.return);
  }
}

Json returned is:

{
 "data":[[ (datatable value) ]],
 "returned":"myvalue"
}

here the jsfiddle

EDIT http://jsfiddle.net/ntcwust8/95/

Solution 1

You just need to remove success callback.

var table = $('#example').DataTable({
        'processing': true,
        'serverSide': true,
        'ajax': {
          type: 'POST',
          'url': url,
          'data': function (d) {
            console.log(d.order);
            return JSON.stringify( d );
          }
        }

Edit

you need to use ajax.dataSrc property it will call after ajax finish. It will work on refresh as well https://datatables.net/reference/option/ajax.dataSrc

var table = $('#example').DataTable({
    'ajax': {
      type: 'POST',
      'url': url,
      'data': function (d) {
        console.log(d.order);
        return JSON.stringify( d );
      },
      "dataSrc": function (json) {
       $("#mydata").val(json.recordsTotal);
       return json.data;
        }
    },

  });

here is updated fiddle. http://jsfiddle.net/2jkg3kqo/2/

Solution 2

Just remove the success callback.

success - Must not be overridden as it is used internally in DataTables. To manipulate / transform the data returned by the server use ajax.dataSrc (above), or use ajax as a function

Datatable by default handles the success callback, Don't override it.

Instead use complete option of AJAX to do something after data loading.

Updated fiddle

Solution 3

Datatable has its own complete event thats called initComplete.

If you redefine success you are overriding Datatable's own function.

var table = $('#example').DataTable({
    'processing': true,
    'serverSide': true,
    'ajax': {
    ....
    ....
    },    
   'initComplete':function(settings, json){
        alert($('#example tbody tr').length+ ' records on screen');
 });

Reference: https://datatables.net/reference/option/initComplete

Update fidle: http://jsfiddle.net/ntcwust8/94/

Comments

[FireFoxII]

Sorry for my english, but I need to update an input value with data returned from json... View my EDIT success function

[FireFoxII]

Sorry for my english, but I need to update an input value with data returned from json... View my EDIT success function

[FireFoxII]

Sorry for my english, but I need to update an input value on every reload with data returned from json... View my EDIT success function

[ojovirtual]

@FireFoxII the initComplete function gets a json variable that's an object with the data from the ajax call. You can access it like json.data, thats an array to all the data.

[FireFoxII]

yes but seems not working when I call table.ajax.reload();

[Jyothi Babu Araja]

Yes you can use the response to do whatever you want. check the updated fiddle here

[ojovirtual]

@FireFoxII when you do ajax.reload the Processing... text never hides , so, I think there is an error somewhere else.

[NiroshanJ]

Complete works every time whenever ajax is called.