Custom loading in Angular Datatables

Question

im trying to implement my custom load in angular datatables. I checked the docs: https://l-lin.imtqy.com/angular-datatables/#/overrideLoadingTpl , an implementation is suggested there:

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

So, in my user settings, I add the load to the sLoadingRecords and sProcessing options , but it does not work.

  .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

I had the same problem; after studying the source, this turns out to be quite simple. datatables.options should be entered as a dependency in the same way as all other dataTables functions:

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

Then you should also enable the DTDefaultOptions service (example):

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

Now the default template <h3>Loading...</h3> can be changed (example):

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

The Loading ... element has nothing to do with the language settings of dataTables, but angular dataTables is its own initialization message. By the way, this element can be created using the CSS class .dt-loading :

 .dt-loading { color: red; } 

Answer 2

you create a boot div with your custom html and add them to your settings:

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

• on 'fnPreDrawCallback' shows html
• in 'fnDrawCallback' hide it.

Answer 3

I had success declaring my module / factory this way. I think that basically what happens is that you enter the factory in your DT module ( myDataTables ), which you "extended" from datatables and datatables.bootstrap .

In addition, I found out that for my purposes there are two half-sized concepts of loading / processing. The boot template and the processing text ... if you use server-side processing, they both come into play. I include use for both here for posterity.

 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); 

Then your controller might look something like this:

 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.imtqy.com/angular-datatables/#/overrideLoadingTpl