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

Posted 2023-05-07

【中文标题】在一行内显示 jQuery dataTables 错误（AngularJS）

【英文标题】：Display a jQuery dataTables error inside a row (AngularJS)

【发布时间】：2017-09-22 15:56:33

【问题描述】：

我是 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() 添加一行 销毁表，然后重新初始化它 编辑当前行的值

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

【参考方案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/

【讨论】：

看准了！我正在尝试非常令人困惑和讨厌的事情，我想我可以将其归咎于缺乏经验......非常感谢大卫 :)