angularjs – Angular Datatables中的自定义加载

发布时间：2020-12-17 17:58:16 所属栏目：安全来源：网络整理

导读：我试图在角度数据表中实现我的自定义加载.我检查了文档： https://l-lin.github.io/angular-datatables/#/overrideLoadingTpl,建议实现： angular.module('showcase',['datatables']).factory('DTLoadingTemplate',dtLoadingTemplate);function dtLoadingTem

我试图在角度数据表中实现我的自定义加载.我检查了文档： https://l-lin.github.io/angular-datatables/#/overrideLoadingTpl,建议实现：

angular.module('showcase',['datatables']).
factory('DTLoadingTemplate',dtLoadingTemplate);
function dtLoadingTemplate() {
    return {
        html: '<img src="images/loading.gif">'
    };
}

因此,在我的自定义选项中,我在选项sLoadingRecords和sProcessing中注入加载,但不起作用.

.factory('myDTOptions',function (DTOptionsBuilder,DTLoadingTemplate) {

  return {
    option1: function(){
      return DTOptionsBuilder.newOptions()
      .withPaginationType('full_numbers')
      .withDisplayLength(10)
      .withBootstrap()
      .withOption('responsive',true)
      .withLanguage({
            "sEmptyTable":     "No hay información disponible","sInfo":           "Mostrando _START_ a _END_ de _TOTAL_ entradas","sInfoEmpty":      "Mostrando 0 a 0 de 0 entradas","sInfoFiltered":   "(filtrada de _MAX_ entradas totales)","sInfoPostFix":    "","sInfoThousands":  ",","sLengthMenu":     "Mostrando _MENU_ entradas","sLoadingRecords": DTLoadingTemplate,"sProcessing":     DTLoadingTemplate,"sSearch":         "Buscar: ","sZeroRecords":    "No se encuentra coincidencias en la búsqueda","oPaginate": {
                        //Dos opciones: https://github.com/DataTables/Plugins/issues/62
                          "sFirst":    '<i class="fa fa-angle-double-left"></i>',"sLast":     '<i class="fa fa-angle-double-right"></i>',"sNext":     '<i class="fa fa-angle-right"></i>',"sPrevious": '<i class="fa fa-angle-left"></i>'
                        },"oAria": {
                "sSortAscending":  ": activar para ordenar columna ascendentemente","sSortDescending": ": activar para ordenar columna descendentemente"
              }
        })
        /*
            .withColVis()
            .withColVisOption('aiExclude',[0,1,6,7,8])*/
      }

解决方法

我有同样的问题;在调查来源后,事实证明这很简单. datatables.options应该作为依赖注入,与所有其他dataTables功能完全一样：

angular.module('myModule',[
  'datatables','datatables.buttons','datatables.bootstrap','datatables.fixedheader',...
  'datatables.options',//<---

])

然后还应包含DTDefaultOptions服务(示例)：

.controller('myCtrl',['$scope','DTOptionsBuilder','DTDefaultOptions',function ($scope,DTOptionsBuilder,DTDefaultOptions) {

现在默认< h3>正在加载…< / h3>模板可以通过(示例)更改：

DTDefaultOptions.setLoadingTemplate('<em>Fetching data</em> ...')

Loading …元素与dataTables语言设置无关,但是angular dataTables拥有初始化消息. BTW这个元素可以通过CSS类.dt-loading来设置样式：

.dt-loading {
  color: red;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!