Want to display the error message on the table in case of failed ajax request but failing to

newbieC

Link to test case: https://jsbin.com/susulayece/edit?html,js,console,output
Debugger code (debug.datatables.net): eqazap
Error messages shown: None
Description of problem: Want to display the error message on the table in case ajax request fails but the code does not work except the html line. What am I doing wrong?

error: function (xhr, error, thrown) {
            if (xhr.status === 404) {
               $('#table2').DataTable().clear().draw();
               $('#table2').DataTable().row.add([
                  "404 Error",
                  "The requested resource was not found.",
                  "", // Add empty columns for other data
               ]).draw(); //this add row method doesn't 
                $('#table2').html('<b>404 Error: Data source not found.</b>'); // this works
            } else {
                $('#table2').html('<b>An error occurred while fetching data: ' + error + '</b>');
            }
        }

Any help is appreciated!

allan

There are a bunch of things going on here. The first is that:

$("#table2").html("<b>404 Error: Data source not found.</b>");

will overwrite the HTML for the table. So your added row won't show.

The second is that you are using columns.data to tell DataTables to expect an object for each row. But the row you are adding is an array, so it will default the the columns.defaultContent you are giving: https://live.datatables.net/gosuliho/1/edit .

You could use the same object format: { name: '404 error', ...}, but really, I think you'd be better just throwing up an error message either in an alert, a modal or inject it into the HTML before the table. Putting it into the table makes it look like data was actually loaded.

Allan

newbieC

I figured so, thanks for clarification!