显示行内一个jQuery数据表误差(AngularJS)(Display a jQuery data

2019-09-29 21:59发布

我是新来的数据表,我试图来处理在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&nbsp;:",
                        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()添加行。行()。加()
  • 销毁表,然后重新初始化
  • 编辑当前行的值

这一切都不到目前为止已经奏效。 你能帮助我吗?

Answer 1:

引述文档

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>')
      }
    }
  },
  ...
})

现在更改消息你需要什么。 数据表本身注入

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

因此,它也完全可以做同样的替代消息。

注意:您不能防止从数据表显示language.emptyTable如果用户以某种方式强制重绘,像点击一个头这样排序是触发-这是它是如何工作的。 而你只有emptyTablezeroRecords处理。 但正如你看到的,你可以很容易地显示不同的信息,以不同的状态代码后,马上AJAX调用已完成或失败。

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



文章来源: Display a jQuery dataTables error inside a row (AngularJS)