在行内显示 jQuery dataTables 错误 (AngularJS)

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

所以我正在做的是：

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 以清除表格，从而强制显示空表格文本。但当涉及到其他错误代码（例如 400）时，我希望文本“未找到”出现在该行中，例如：

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

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

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

引用docs https://datatables.net/reference/option/ajax :

success - Must not被覆盖，因为它在内部使用 数据表...

Use 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>

因此，用替代消息做同样的事情是完全可以的。

注：你cannot防止数据表显示language.emptyTable如果用户以某种方式强制重绘，例如单击标题，则会触发排序 - 这就是它的工作原理。而你只有emptyTable and zeroRecords去处理。但正如您所看到的，您可以在 AJAX 调用完成或失败后立即轻松地向不同的状态代码显示不同的消息。

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