CODEWITHSUNDEEP
ajaxexceptiondatatables
nap
nap

Reputation: 246

Custom Error Message after Datatables ajax exception

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

Upvotes: 22

Views: 32534

Answers (4)

myckhel
myckhel

Reputation: 900

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'
        });
    });

Upvotes: 10

RESH
RESH

Reputation: 39

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 
             }

Upvotes: 3

Nick Pyett
Nick Pyett

Reputation: 3408

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.

Upvotes: 35

mmushtaq
mmushtaq

Reputation: 3520

     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';

Upvotes: 0

Related Questions