When I add success function DataTable not fill up automaticly rows in table. When I remove success function everything is all right and datatable fill correctly data in table. I want to catch in response using getAccessMessageWithStatus message by status but if I do it like this datatable no filling rows. How I can do that?

$('#' + datatableName).DataTable({
  destroy: true,
  'bProcessing': false,
  'bServerSide': true,
  'ajax': {
    'url': URL,
    'data': filters,
    beforeSend: function() {
      loader.popup('show');
    },
    success: function(response) {
      getAccessMessageWithStatus(response);

    },
    complete: function() {
      $listContainer.show();
      $containerChoiseColumnsFilter.show();
      $(".containerRaportButtons").show();
      getLastSearches();
      getUses();
      loader.popup('hide');
    }
  },
  'sServerMethod': "POST",
  'columns': columns,
  'order': order,
  'responsive': true
});

Answers:

success: function(response) {
  getAccessMessageWithStatus(response);

},

Or:

"dataSrc": function(response) {

  if (response.status == false) {
    alert(response.msg);
    return [];
  }
  return response.aaData;
},

When I add success function DataTable not fill up automaticly rows in table. When I remove success function everything is all right and datatable fill correctly data in table. I want to catch in response using getAccessMessageWithStatus message by status but if I do it like this datatable no filling rows. How I can do that?

$('#' + datatableName).DataTable({
  destroy: true,
  'bProcessing': false,
  'bServerSide': true,
  'ajax': {
    'url': URL,
    'data': filters,
    beforeSend: function() {
      loader.popup('show');
    },
    success: function(response) {
      getAccessMessageWithStatus(response);

    },
    complete: function() {
      $listContainer.show();
      $containerChoiseColumnsFilter.show();
      $(".containerRaportButtons").show();
      getLastSearches();
      getUses();
      loader.popup('hide');
    }
  },
  'sServerMethod': "POST",
  'columns': columns,
  'order': order,
  'responsive': true
});

Answers:

success: function(response) {
  getAccessMessageWithStatus(response);

},

Or:

"dataSrc": function(response) {

  if (response.status == false) {
    alert(response.msg);
    return [];
  }
  return response.aaData;
},

• javascript
• jquery
• ajax

3 Answers 3

Remove ";" after the function name into the code.

success: function (response) {
      getAccessMessageWithStatus(response)
},

There is an event from DatatTable called 'xhr.dt'. You can use it in that way.

$('#' + datatableName).on('xhr.dt', function(e, settings, json, xhr){
    getAccessMessageWithStatus(json);
}).DataTable({
    destroy: true,
    'bProcessing': false,
    'bServerSide': true,
    'ajax':
        {
            'url': URL,
            'data': filters,
            beforeSend: function () {
                loader.popup('show');
            },
            complete: function () {
                $listContainer.show();
                $containerChoiseColumnsFilter.show();
                $(".containerRaportButtons").show();
                getLastSearches();
                getUses();
                loader.popup('hide');
            }
       }
});

You shouldn't use success from ajax attribute because you will overwrite the success function from DataTable. See this piece of code from query.dataTables.js

"success": function (json) {
    var error = json.error || json.sError;
    if ( error ) {
        _fnLog( oSettings, 0, error );
    }

    oSettings.json = json;
    callback( json );
}

You can notice that they have a callback inside this function. This callback triggers the function _fnCallbackFire and this call the event xhr.dt

For more information, go to this page https://datatables.net/reference/event/xhr

You can use it this way:

"complete": function (json, type) { //type return "success" or "parsererror"
    if (type == "parsererror") {
        alert("parsererror");
    }
     ... 
}