13

While using datatables I need to use a custom ajax-function.

The canonical example as found here is as follows: 

$('#example').dataTable( {
  "ajax": function (data, callback, settings) {
    //some async processing happening here
    //In the end call the callback. 
    //However, this callback only accepts a success state
    // instead of the usual cb(err, resp) signature. 
    //This raises the question how to let Datatables know there's an error.
    const err = new Error("some contrived error");


    //This doesn't work, datatables doesn't signal an actual error
    //which can be surfaced to the client. Instead it complains
    //the response doesn't have a 'data'-object which it needs
    //to correctly create the table. In other words, datatables
    //thinks that the passed err-object is an actual correct response. 

    //Question: so how to actually let datatables know there's an actual error?
    callback(err);
  }
} );

However, I don't see a way to let datatables know that an ajax-error occurred.

How to do this?

Improve this question
3
  • Can you clarify what you mean by "signal datatables that an error is found in this situation"? What exactly do you want to do in an error condition, and where is the error condition happening? Commented Jun 29, 2017 at 15:36
  • @mhodges: updated question Commented Jun 29, 2017 at 19:39
  • Just posted an answer. Give it a try and let me know if that's what you were looking for. Commented Jun 29, 2017 at 20:32

1 Answer 1

Reset to default
12
+150

After trying a few different methods, I think your best bet will be to call the callback function with your data on a success and call callback with empty data on a failure. If there is an error, you can set the text of the .dataTables_empty row to the text of your error message, so it will display in the table. Here's how it would work, and what the code would look like:

Important Note - Make sure to set the .dataTables_empty text after you call the callback, because the callback will set it back (which is actually nice because then you don't have to reset it yourself on each data load)

$('#example').dataTable( {
  "columns": [
    {"data": "col1"},
    {"data": "col2"},
    {"data": "col3"},
  ],
  "ajax": function (data, callback, settings) {
    // simulate ajax call with successful data retrieval
    var myAjaxCall = new Promise(function (resolve, reject) {
      $(".dataTables_empty").text("Loading...");
      setTimeout(function () {
        // `callback()` expects an object with a data property whose value is either 
        // an array of arrays or an array of objects. Must be in this format
        // or you get errors.
        var ajaxData = {"data": [
          {"col1": "1.1", "col2": "1.2", "col3": "1.3"},
          {"col1": "2.1", "col2": "2.2", "col3": "2.3"},
          {"col1": "3.1", "col2": "3.2", "col3": "3.3"}
        ]};
        resolve(ajaxData);
      }, 1500);
    });
    
    myAjaxCall.then(function resolveCallback(data) {
      // render data returned from ajax call
      callback(data);
    }, function rejectCallback(err) {
      callback({data: []});
      $(".dataTables_empty").text(err); 
    });
  }
});

$('#example2').dataTable( {
  "columns": [
    {"data": "col1"},
    {"data": "col2"},
    {"data": "col3"},
  ],
  "ajax": function (data, callback, settings) {
    // simulate unsuccessful ajax call
    var myAjaxCall2 = new Promise(function (resolve, reject) {
      $(".dataTables_empty").text("Loading...");
      setTimeout(function () {
        // reject promise with error message
        reject("Something went terribly wrong!");
      }, 1500);
    });
    
    myAjaxCall2.then(function resolveCallback(data) {
      callback(data);
    }, function rejectCallback(err) {
      // render table with no results
      callback({data: []});
      // set dataTables empty message text to error message
      $(".dataTables_empty").text(err); 
    });
  }
});
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" />
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<h1>Success</h1>
<table id="example">
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>
<h1>Error</h1>
<table id="example2">
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

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

3 Comments

Repurposing the empty table statement isn't the best solution ... if an error results in an empty table, then the table should state an empty statement. The right answer is to use the error: callback or the 'error.dt' event ... now if I could just get that to work! See: datatables.net/reference/event/error
@IdahoB I'm not sure. Even with manually triggering the error.dt event, it doesn't display the error in the table. You could manually capture the event and display something in the table, but it doesn't really buy you anything above what my solution provides. I think the internal interfaces are insufficient for solving this problem, so a hacky solution is required.
Semantics. Re-purposed or dual-purpose stuff tends to come back and bite you later when you do software maintenance. datatables.net doesn't always behave the way I'd guess though. In general, I use AJAX tables, send error messages back as part of the data json payload, but also use the error callback to display a generic error message (in an error message div) if an uncaught exception on the server side occurs. I have NOT figured out how to send a custom error message to the error callback.

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.