22

I am displaying a table of data using datatables 1.10.12. The user can specify input parameters that cause an error on the server. An appropriate error message should be displayed to the user so they can modify their setup, however the only error options seem to be:

  1. SHow the following generic error in an alert: "DataTables warning: table id=trackingTable - Ajax error. For more information about this error, please see http://datatables.net/tn/7"
  2. Show the generic error in the browser console
  3. Modify the server to return no rows, that is fail silently.

Does anyone know how to show a custom error after a datatables ajax request fails?

The following code sample is taken from the datatables documentation. Datatables handles the ajax call and handles success and error. 

$(document).ready(function() {
    $('#example').DataTable( {
        "ajax": '../ajax/data/arrays.txt'
    } );
} );

A 4th option I could add to the list would be to modify the datatables source code to handle the an error response myself. Which I'm not that keen on.

This question was asked in 2015 however it did not get an answer. See: display server side exception

Improve this question
4
  • many ways to do that.. you can apply try catch in javascript function while sending an ajax request as well as you can show error message at ajax error function if any error occurred. Commented Aug 11, 2016 at 4:47
  • Thanks mmushtaq. How do I add the try catch to the datatables ajax request? Commented Aug 11, 2016 at 6:58
  • Is this helpful? datatables.net/reference/event/error Commented Aug 11, 2016 at 16:56
  • This is good. Thanks @Adam. However I can't see how to get access to the error message or status that was returned by the ajax call. Commented Aug 12, 2016 at 2:36

4 Answers 4

Reset to default
35

If you pass an object to the ajax property you can override the jQuery.ajax() error method:

$(document).ready(function () {
    $('#example').DataTable({
        ajax: {
            url: '../ajax/data/arrays.txt',
            error: function (jqXHR, textStatus, errorThrown) {
                // Do something here
            }
        }
    });
});

https://datatables.net/reference/option/ajax#object

This will stop the standard error message in the alert box.

Please note, it is not recommended to override the success method of jQuery.ajax() as it is used by DataTables.

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

1 Comment

not really, this works only if you call ajax standalone, with datatable, error is useless, tried it and it doesn't catch a thing. seems like you cannot override the error function
10

You can implement your own custom error message globally like the example below.

$(document).ready(function() {
        $.fn.dataTable.ext.errMode = () => alert('Error while loading the table data. Please refresh');
        $('#example').DataTable( {
            "ajax": '../ajax/data/arrays.txt'
        });
    });
Improve this answer

Comments

3

Answering just in case someone is still looking for a solution.

In my case, I did the following

  1. At server side set DataTablesOutput object.setError("ErrorMsg")
  2. In my js method $.fn.dataTable.ext.errMode = 'none'; to avoid the error popup.
  3. Created an error div in my page to display the custom error message

  4. Added the below to my js method to handle error

    $('#myDataTable')
        .on('error.dt',
            function(e, settings, techNote, message) {//Logic to set the div innertext 
             }
Improve this answer

Comments

0 
     try {
     $.ajax({
       -------
       -------
    success: function (data){
         //ShowDataTable is a js Function which takes ajax response data and display it.
           ShowDataTable(data);
    },
      //this error will catch server-side error if request fails
      error: function (xhr, textStatus, errorThrown) {
         alert(errorThrown);
         ShowDataTable(null);
       } 
      })

     }
    //this catch block will catch javascript exceptions,
    catch (Error) {
                if (typeof console != "undefined") {
                    console.log(Error);
                    ShowDataTable(null);                    
                    alert(Error);
                 }
              }

EDIT

If you are willing to accept the error (for example if you cannot alter the backend system to fix the error), but don't want your end users to see the alert() message, you can change DataTables' error reporting mechanism to throw a Javascript error to the browser's console, rather than alerting it. This can be done using:

$.fn.dataTable.ext.errMode = 'throw';
Improve this answer

3 Comments

I don't think this is a solution. DataTables link handles the ajax call itself. I've updated the question to clarify this.
On the plus side I spent a fair bit of time today adding code to prevent the user setting up an invalid request in the first place. However it seems desirable to have the capacity to display meaningful error messages resulting from server side faults on occaision so I assume Datatables must be able to do this.
The Error that you have mentioned is due failure of ajax request. . Simply add try catch in Document.Ready() to catch JS exceptions. The other solution is provided in DataTable Error link .. See my edit

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.