Custom loading in Angular Datatables

I had the same problem; after investigating the source it turns out to be quite simple. datatables.options should be injected as a dependency exactly as all the other dataTables features :

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

])

Then the DTDefaultOptions service should be included as well (example) :

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

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

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

The Loading... element has nothing to do with dataTables language settings, but is angular dataTables own initialisation message. BTW this element can be styled through the CSS class .dt-loading :

.dt-loading {
  color: red;
}

you create a loading div with your custom html and add these to options to the setup :

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

• on 'fnPreDrawCallback' show the html
• on 'fnDrawCallback' hide it.

I've had success declaring my module/factory this way. I think essentially what happens is you inject the factory into your DT Module (myDataTables) which you "extended" from datatables and datatables.bootstrap.

Also, I found out for my own purposes there are two semi-ambiguous notions of loading/processing. The loading template and the processing text... if you're using server side processing they both come into play. I'm including usage 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.github.io/angular-datatables/#/overrideLoadingTpl