在Angular Datatables中自定義加載

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和datatables.bootstrap「擴展」的DT模塊（myDataTables）。

此外，我發現爲我自己的目的有兩個加載/處理半含糊不清的概念。加載模板和處理文本......如果您使用服務器端處理，它們都會發揮作用。我在這裏包括用於後代的用法。

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

Answer 2

創建裝載DIV與您的自定義HTML和這些將選項添加到設置：

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

• 在'fnPreDrawCallback'上顯示html
• 'fnDrawCallback'隱藏它。

Answer 3

我有同樣的問題;經過調查後，結果很簡單。 datatables.options應該正是注入作爲一個依賴所有其他數據表功能：

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語言設置無關，但是角度數據表自己的初始化消息。

.dt-loading { 
    color: red; 
}