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

Question

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

所以我在做什么是：

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> 

DIRECTIVE

$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，我想文“未找到”出现在该行中，像这样的：

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

• 要使用数据表（）中添加行。行（）。添加（）
• 销毁表，然后重新初始化它
• 编辑当前行的值

到目前为止，这一切都没有奏效。你可以帮我吗？

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> 

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

注意：无法防止显示language.emptyTable数据表，如果用户以某种方式强制重绘，像点击一个头这样排序是触发 - 这是它是如何工作的。而你只有emptyTable和zeroRecords来处理。但正如您所看到的，您可以在AJAX调用完成或失败后立即向不同的状态代码显示不同的消息。

看到一个身材矮小的演示（无法重现204） - >http://jsfiddle.net/qfwL3v11/