4

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

3 回答 3

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>Loading...</h3>现在可以通过 (example) 更改默认模板：

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

Loading... 元素与 dataTables 语言设置无关，而是 angular dataTables 自己的初始化消息。顺便说一句，这个元素可以通过 CSS 类设置样式.dt-loading：

.dt-loading {
  color: red;
}
于 2016-07-06T05:48:21.823 回答
3

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

.withOption('fnPreDrawCallback', function () { console.log('loading..') })
.withOption('fnDrawCallback', function () { console.log('stop loading..') })
  • 在“fnPreDrawCallback”上显示 html
  • 在“fnDrawCallback”上隐藏它。
于 2016-01-13T14:26:41.620 回答
0

我已经成功地以这种方式声明了我的模块/工厂。我认为基本上发生的事情是您将工厂注入您的 DT Module ( )，您从and中myDataTables“扩展”了它。datatablesdatatables.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

于 2015-09-26T20:24:38.420 回答