数据表:使用自定义 AJAX 函数时如何捕获错误?

Question

在使用数据表时，我需要使用自定义的ajax函数。

此处找到的规范示例如下：

$('#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行的文本设置为错误消息的文本，以便它显示在表中。以下是它的工作原理，以及代码的外观：

重要说明- 确保在调用回调后设置.dataTables_empty文本，因为回调会设置它(这实际上很好，因为这样您就不必在每次数据加载时自己重置它)

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