在行内显示jQuery dataTables错误(AngularJS) [英] Display a jQuery dataTables error inside a row (AngularJS)
问题描述
我是DataTables的新手，我正在尝试处理在AngularJS指令中分配的JQuery DataTable的服务器端错误.想法是在表格内 显示各种信息和/或错误消息. 我们不允许使用警报，也不能在表格外使用文本.
I'm new to DataTables, and I'm trying to handle the server-side errors on a JQuery DataTable allocated in an AngularJS directive. The idea is to display various informative and/or error messages inside the table. We are not allowed to use alerts, nor text outside the table.
所以我正在做的是:
VIEW
<div class="row">
<div class="col-xs-12">
<table id="tabla-recibos" class="table table-hover dataTable">
<thead>
<tr>
<!-- <th style="display:none;"><span data-translate="global.field.id">Id</th> -->
<th><span data-translate="webclientesApp.recibo.numRecibo">Núm. de póliza</th>
<th><span data-translate="webclientesApp.recibo.numPoliza">Expediente</th>
<th><span data-translate="webclientesApp.recibo.importe">Nombre del tomador</th>
<th><span data-translate="webclientesApp.recibo.fechaPago">Nombre del asegurado</th>
<th><span data-translate="webclientesApp.recibo.estado">Estado</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
指令
$element.find('#tabla-recibos').DataTable({
autowidth: true,
pageLength: 5,
ajax: {
url: '/api/recibos/dni/' + $ctrl.dniUser,
type: "GET",
dataSrc: '',
success : function(data,textStatus,jqXHR) {
if (jqXHR.status == "204") {
$('#tabla-recibos').DataTable().clear().draw();
}
},
error: function(jqXHR, exception){
$.fn.DataTable.ext.errMode = 'throw';
$('#tabla-recibos').DataTable().row().add("Not found");
}
},
columns: [
// { data: "id" },
{ data: "numRecibo" },
{ data: "numPoliza" },
{ data: "importe" },
{ data: "fechaPago" },
{ data: "estado" }
],
language: {
processing: "Tratamiento en curso...",
search: "Buscar :",
lengthMenu: "Mostrar _MENU_ elementos",
info: "Mostrando _START_ a _END_ de _TOTAL_ elementos",
infoEmpty: "Viendo los elementos 0 - 0 de _TOTAL_ elementos",
infoFiltered: "(filtrado de _TOTAL_ elementos)",
infoPostFix: "",
loadingRecords: "Cargando datos...",
zeroRecords: "No hay datos para mostrar",
emptyTable: "No existen recibos para este usuario",
paginate: {
first: "Primero",
previous: "Anterior",
next: "Siguiente",
last: "�ltimo"
},
aria: {
sortAscending: ": habilitado para ordenar la columna en orden ascendente",
sortDescending: ": habilitado para ordenar la columna en orden descendente"
}
},
如您所见，我正在尝试处理错误代码204以清除表，从而强制显示emptyTable文本.但是，当涉及其他错误代码(例如400)时，我希望在该行中显示未找到"文本，例如:
As you can see, I'm trying to handle the error code 204 to clear the table, thus forcing the emptyTable text to appear. But when it comes to other error codes, such as 400, I want the text "Not found" to appear in the row, such as this:
到目前为止，我已经尝试过:
So far, I've tried:
- 使用DataTable().row().add()添加行
- 销毁表，然后重新初始化
- 编辑当前行的值
到目前为止，这些方法都没有奏效.你能帮我吗?
None of this have worked so far. Can you help me?
推荐答案
引用 文档 :
success-必须覆盖 not ，因为它在内部使用 数据表...
success- Must not be overridden as it is used internally in DataTables ...
使用error()捕获AJAX错误，基本上是避免讨厌的弹出窗口或控制台消息.然后使用statusCode对不同的HTTP状态代码执行不同的操作.这是一个示例:
Use error() to catch AJAX errors, basically to avoid nasty popups or console messages. Then use statusCode to perform different actions to different HTTP status codes. Here is an example :
var table = $('#example').DataTable({
ajax: {
url: 'url/to/server',
//catch any errors so you not get nasty popups
error: function(jqXHR, exception) {
},
statusCode: {
200: function() {
console.log('OK 200')
},
204: function() {
console.log('Empty 204')
//language.emptyTable is shown automatically
},
400: function() {
console.log('Bad Request 400');
$('#example tbody')
.empty()
.append('<tr><td colspan="6" class="dataTables_empty">Bad request</td></tr>')
},
500: function() {
console.log('Internal server error 500');
$('#example tbody')
.empty()
.append('<tr><td colspan="6" class="dataTables_empty">Internal server error</td></tr>')
}
}
},
...
})
现在将消息更改为您所需的消息. dataTables本身正在注入
Now change the messages to what you need. dataTables itself is injecting a
<tr>
<td colspan="6" class="dataTables_empty">
{{ language.emptyTable }}
</td>
</tr>
因此，用替代消息执行相同操作是完全可以的.
So it is perfectly OK to do the same with an alternative message.
注意:如果用户以某种方式强制重绘，例如单击标题以触发排序，则不能阻止dataTables显示language.emptyTable-这就是它的工作原理.而且您只需要处理emptyTable和zeroRecords.但是正如您所看到的，在AJAX调用完成或失败之后，您可以轻松地将不同的消息显示给不同的状态代码.
Note: You cannot prevent dataTables from showing language.emptyTable if the user somehow forces a redraw, like clicking on a header so sorting is triggered - this is just how it works. And you only have emptyTable and zeroRecords to deal with. But as You see, you can easily show different messages to different status codes, immediately after the AJAX call has finished or failed.
查看小型演示(无法重现204)-> http://jsfiddle.net/qfwL3v11/
See a diminutive demo (cannot reproduce a 204) -> http://jsfiddle.net/qfwL3v11/
这篇关于在行内显示jQuery dataTables错误(AngularJS)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
