javascript - validacion - tablas de datos: ¿cómo detectar el error cuando se usa la función ajax personalizada?

validar formulario html5

Question

Al usar datatables , necesito usar una función ajax personalizada.

El ejemplo canónico que se encuentra aquí es el siguiente:

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

Sin embargo, no veo una forma de que las tablas de datos sepan que se produjo un error ajax.

¿Como hacer esto?

Answer 1

Después de probar algunos métodos diferentes, creo que su mejor opción será llamar a la función de callback con sus datos en caso de éxito y devolver la callback con datos vacíos si falla. Si hay un error, puede establecer el texto de la fila .dataTables_empty en el texto de su mensaje de error, por lo que se mostrará en la tabla. Así es cómo funcionaría, y cómo se vería el código:

Nota importante : asegúrese de establecer el texto .dataTables_empty después de llamar a la devolución de llamada, ya que la devolución de llamada lo establecerá de nuevo (lo cual es realmente bueno porque no tiene que reiniciarlo en cada carga de datos)

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