在一行内显示 jQuery dataTables 错误（AngularJS）

Question

我是 DataTables 的新手，我正在尝试处理在 AngularJS 指令中分配的 JQuery DataTable 上的服务器端错误。这个想法是在表格内部显示各种信息和/或错误消息。 我们不允许使用提醒，也不允许在表格之外使用文字。

所以我正在做的是：

查看

<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，我希望文本“未找到”出现在行中，比如：

到目前为止，我已经尝试过：

• 使用 DataTable().row().add() 添加一行
• 销毁表，然后重新初始化它
• 编辑当前行的值

到目前为止，这些都没有奏效。你能帮帮我吗？

Answer 1

引用docs：

success - 必须不被覆盖，因为它在内部使用 数据表 ...

使用error() 来捕获 AJAX 错误，主要是为了避免讨厌的弹出窗口或控制台消息。然后使用statusCode对不同的HTTP状态码执行不同的动作。这是一个例子：

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 本身正在注入一个

<tr>
  <td colspan="6" class="dataTables_empty">
    {{ language.emptyTable }}
  </td>
</tr>

因此，对替代消息执行相同操作是完全可以的。

注意：如果用户以某种方式强制重绘（例如单击标题以触发排序），您不能阻止 dataTables 显示 language.emptyTable - 这就是它的工作原理。而你只有emptyTable 和zeroRecords 需要处理。但是如您所见，您可以在 AJAX 调用完成或失败后立即轻松地向不同的状态代码显示不同的消息。

查看小型演示（无法重现 204）-> http://jsfiddle.net/qfwL3v11/