set an error handler for jquery datatables ajax call

Question

I'm trying to have a custom error handler when something goes wrong (i.e. the server does not respond) on the ajax call for loading new data into my datatable.

$table.DataTable().ajax.url(ajaxURL).load();

By default it shows an alert and I can change that to throw a javascript error with the following setting:

$.fn.dataTable.ext.errMode = 'throw';

But with this, I just have an error logged to the console and I'm not sure how to catch that thrown error so I still can't provide my own error handler.

There is also an error event listed in the documentation, but that doesn't seem to get triggered, so the following never alerts.

$table.on( 'error', function () { alert( 'error' );} );

Everything else I've found so far is for the legacy code, such as setting the fnServerData, which I would like to avoid getting into.

Is there a method to set the ajax error callback in the 1.10 API?

Since ajax calls are asynchronous, it can bypass exception handling. The error probably needs to get caught in their code. You're right, the lack of an error handler is a strange omission. This is why I don't use DataTables's ajax methods. I just use the jQuery 'ajax', which does have success and error handlers, and redraw the table from scratch. — stakolee
– stakolee, Commented Jan 20, 2015 at 16:35

Sastrija · Accepted Answer · 2018-10-30 00:58:23Z

60

New error event handling has been added in Datatables v1.10.5 (released 10th February 2015).

$.fn.dataTable.ext.errMode = function ( settings, helpPage, message ) { 
    console.log(message);
};

See docs here:
https://datatables.net/reference/event/error
https://cdn.datatables.net/1.10.5/

edited Oct 30, 2018 at 0:58

Sastrija

3,3826 gold badges52 silver badges67 bronze badges

answered Feb 19, 2015 at 11:30

s0ndeb0k

9047 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Subrat Pattnaik Over a year ago

Thanks. I updated to 1.10.6 and now I am able to show a custom alert message.

Zugor Over a year ago

Thanks. I added this to my main master blade. Every pages doesn't require datatable so I needed to wrap it with this if($.fn.dataTable !== undefined){}

reformed · Accepted Answer · 2022-05-31 15:02:56Z

25

Use the Ajax error function to log errors:

$('#table').DataTable({
    ajax: {
        dataType: "JSON",  
        type: "POST",
        url: url,
        data: [],
        async: true,
        error: function (xhr, error, code) {
            console.log(xhr, code);
        }
    },
});

edited May 31, 2022 at 15:02

reformed

4,82813 gold badges69 silver badges94 bronze badges

answered Jan 29, 2019 at 6:36

Khaan

7899 silver badges23 bronze badges

1 Comment

LarryBud Over a year ago

any way to set a global error function?

J.C. Gras · Accepted Answer · 2018-08-29 18:40:34Z

5

Use the event as a custom error handler:

$(document).ready(function () {
    $('#myTable').on('error.dt', function (e, settings, techNote, message) {
        console.log('An error has been reported by DataTables: ', message);
    }).DataTable({
        "displayLength": 15,
        "ajax": {
          ....

answered Aug 29, 2018 at 18:40

J.C. Gras

5,4621 gold badge44 silver badges46 bronze badges

1 Comment

Muhammad Shuja Over a year ago

also don't forget to add $.fn.dataTable.ext.errMode = 'none'; before event to turn default error alert off

MilMike · Accepted Answer · 2021-03-31 09:04:07Z

4

I am using Datatables 1.10.19 + Bootstrap and most of the solutions provided (including the accepted one above) did not work. However, I managed to capture the error as follows:

 "ajax" : {
    "datatype" : "json",
    "contentType" : "application/json",
    "method" : "GET",
    "url" : $url,
    "data" : { x : y },
    "dataSrc": function (data) {
      if (data.result == "OK"){
        return data.yourObj;
      }else{
        // hide processing or any loading modal here
        // display error on page or something
        console.log("Error: " + parseResultData(data.resultData));
        data.yourObj = [] //since datatables will be checking for the object as array
        return data.yourObj;
      }                           
    } 
  }

edited Mar 31, 2021 at 9:04

MilMike

12.9k16 gold badges69 silver badges85 bronze badges

answered Mar 24, 2020 at 3:44

Evans L.

393 bronze badges

1 Comment

vee Over a year ago

I'm using DataTables 1.13.x but dataSrc is not called or fired when there is an error (for example HTTP 500). It will be working only success response (HTTP 200 or something like that).

Chris · Accepted Answer · 2023-11-23 18:40:47Z

1

"ajax" : {
    "datatype" : "json",
    "contentType" : "application/json",
    "method" : "GET",
    "url" : $url,
    "data" : { x : y },
    "dataSrc": function (data) {
      if (data.result == "OK"){
        return data.yourObj;
      }else{
        // hide processing or any loading modal here
        // display error on page or something
        console.log("Error: " + parseResultData(data.resultData));
        data.yourObj = [] //since datatables will be checking for the object as array
        return data.yourObj;
      }                           
    } 
  }

edited Nov 23, 2023 at 18:40

Chris

139k139 gold badges316 silver badges293 bronze badges

answered Nov 22, 2023 at 22:05

Sangay Choezom

111 bronze badge

Collectives™ on Stack Overflow

set an error handler for jquery datatables ajax call

5 Answers 5

2 Comments

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related