Question

我试图在角度数据表中实现我的自定义加载。我查看了文档：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])*/
      }

Answer 1

我有同样的问题;在调查来源后，事实证明这很简单。 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>Loading...</h3>模板：

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

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

.dt-loading {
  color: red;
}

Answer 2

您使用自定义html创建加载div，并将这些添加到设置的选项中：

.withOption('fnPreDrawCallback', function () { console.log('loading..') })
.withOption('fnDrawCallback', function () { console.log('stop loading..') })

on＆＃39; fnPreDrawCallback＆＃39;显示html
on＆＃39; fnDrawCallback＆＃39;隐藏它。

Answer 3

我已成功通过这种方式宣布我的模块/工厂。我认为基本上是将工厂注入您从myDataTables和datatables“扩展”的DT模块（datatables.bootstrap）。

另外，我发现出于我自己的目的，有两个半模糊的加载/处理概念。加载模板和处理文本......如果您正在使用服务器端处理，它们都会发挥作用。我在这里为后人包括了用法。

var dtLoadingTemplate;

dtLoadingTemplate = function() {
  return {
    html: '<img src="images/loading.gif">'
  };
};

angular.module('myDataTables', ['datatables', 'datatables.bootstrap']).run(function(DTDefaultOptions) {
  DTDefaultOptions.setLanguage({
    // ...
    sProcessing: '<img src="images/loading.gif">'
  });
}).factory('DTLoadingTemplate', dtLoadingTemplate);

然后你的控制器看起来像这样：

myApp.controller('UsersController', [
    '$scope', 'DTOptionsBuilder', 'DTColumnBuilder', function($scope, DTOptionsBuilder, DTColumnBuilder) {

        $scope.dtInstance = null;
        $scope.dtOptions = DTOptionsBuilder.newOptions().withOption('ajax', {
            dataSrc: 'data',
            url: '/users.json',
            type: 'POST'
        })
        .withOption('processing', true)
        .withOption('serverSide', true)
        .withPaginationType('full_numbers').withBootstrap()
        .withOption('aaSorting', [0, 'desc'])
        .withOption('createdRow', function(row, data, dataIndex) {
            $scope.users.push(data);
            return $compile(angular.element(row).contents())($scope);
        });
        return $scope.dtColumns = [
            DTColumnBuilder.newColumn('id').withTitle('ID').withClass('user-id'),
            DTColumnBuilder.newColumn('name').withTitle('Title').withClass('user-name'),
            DTColumnBuilder.newColumn(null).withTitle('Actions').withClass('users_actions').notSortable().renderWith(function(user, type, full, meta) {
                return "<a class='btn btn-link' href='/users/" + user.id + "'>" + "<span class='fa fa-external-link fa-lg text-default' tooltip-placement='bottom' tooltip='View User'></span></a>";
            })
        ];
    }
]);

http://l-lin.github.io/angular-datatables/#/overrideLoadingTpl

Angular Datatables中的自定义加载

3 个答案: