在一行內顯示一個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/