datatables：如何在使用自定义ajax函数时捕获错误？

Question

使用datatables时，我需要使用自定义ajax函数。

找到here的规范示例如下：

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

但是，我没有看到让数据表知道发生了ajax错误的方法。

怎么做？

Answer 1

在尝试了几种不同的方法之后，我认为最好的办法就是在成功时使用数据调用callback函数，并在失败时使用空数据调用callback。如果出现错误，您可以将.dataTables_empty行的文本设置为错误消息的文本，以便显示在表格中。以下是它的工作方式，以及代码的外观：

重要提示 - 确保在调用回调后设置} 之后的文本，因为回调会将其设置回来（这实际上很好，因为然后你不必在每次数据加载时自己重置它）

＆＃13;

＆＃13;

.dataTables_empty

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;