#35 Add the possibility to override loading template

Author: l-lin

demo/app.js

@@ -24,6 +24,13 @@
                     $rootScope.$broadcast('event:changeView', 'zeroConfig');
                 }
             })
+            .state('overrideLoadingTpl', {
+                url: '/overrideLoadingTpl',
+                templateUrl: 'demo/partials/override_loading_tpl.html',
+                controller: function($rootScope) {
+                    $rootScope.$broadcast('event:changeView', 'overrideLoadingTpl');
+                }
+            })
             .state('withOptions', {
                 url: '/withOptions',
                 templateUrl: 'demo/partials/with_options.html',
@@ -144,6 +151,11 @@
             .withColVis()
             .withOption('bAutoWidth', false)
             .withTableTools('vendor/datatables-tabletools/swf/copy_csv_xls_pdf.swf');
+    })
+    .factory('DTLoadingTemplate', function() {
+        return {
+            html: '<h3>Loading great stuffs!!!</h3>'
+        };
     });
 
     backToTop.init({

demo/partials/override_loading_tpl.html

@@ -0,0 +1,23 @@
+<article class="main-content">
+    <header class="article-header">
+        <h1><i class="fa fa-play"></i>&nbsp;Override <code>Loading</code> template</h1>
+    </header>
+    <section class="article-content">
+        <p>
+            When loading data, the angular module will display <code>&lt;h3 class="dt-loading"&gt;Loading...&lt;/h3&gt;</code>.
+        </p>
+        <p>
+            You can make your own custom loading html by override the <code>DTLoadingTemplate</code> like this:
+        </p>
+    </section>
+    <section class="showcase no-tab">
+<div hljs>
+angular.module('datatablesSampleApp', ['datatables']).
+factory('DTLoadingTemplate', function() {
+    return {
+        html: '<h1>CUSTOM LOADING</h1>'
+    };
+});
+</div>
+    </section>
+</article>

demo/partials/sidebar.html

@@ -40,6 +40,11 @@
                     <i class="menu-icon fa fa-caret-right"></i>&nbsp;Data reload with promise
                 </a>
             </li>
+            <li ng-class="{'active': isActive('overrideLoadingTpl')}">
+                <a ui-sref="overrideLoadingTpl">
+                    <i class="menu-icon fa fa-caret-right"></i>&nbsp;Custom loading HTML
+                </a>
+            </li>
             <li ng-class="{'active': isActive('serverSideProcessing')}">
                 <a ui-sref="serverSideProcessing">
                     <i class="menu-icon fa fa-caret-right"></i>&nbsp;Server side processing

dist/angular-datatables.js

@@ -311,8 +311,9 @@
     '$timeout',
     'DT_LAST_ROW_KEY',
     '$DTBootstrap',
-    function (DT_DEFAULT_OPTIONS, $timeout, DT_LAST_ROW_KEY, $DTBootstrap) {
-      var $loading = angular.element('<h3>Loading...</h3>'), _showLoading = function ($elem) {
+    'DTLoadingTemplate',
+    function (DT_DEFAULT_OPTIONS, $timeout, DT_LAST_ROW_KEY, $DTBootstrap, DTLoadingTemplate) {
+      var $loading = angular.element(DTLoadingTemplate.html), _showLoading = function ($elem) {
           $elem.after($loading);
           $elem.hide();
         }, _hideLoading = function ($elem) {
@@ -867,7 +868,9 @@
         }
       };
     }
-  ]);
+  ]).factory('DTLoadingTemplate', function () {
+    return { html: '<h3 class="dt-loading">Loading...</h3>' };
+  });
 }(jQuery, angular));
 (function (angular) {
   'use strict';

dist/angular-datatables.min.js

@@ -7,7 +7,7 @@
         "grunt": "~0.4.1",
         "grunt-express": "1.2.0",
         "grunt-contrib-watch": "~0.5.2",
-        "grunt-contrib-clean": "~0.5.0",
+        "grunt-contrib-clean": "0.5.0",
         "grunt-contrib-concat": "~0.3.0",
         "grunt-contrib-cssmin": "~0.7.0",
         "grunt-contrib-jshint": "~0.7.1",

package.json

@@ -6,8 +6,8 @@
         sAjaxDataProp: '',
         aoColumns: []
     }).
-    directive('datatable', function(DT_DEFAULT_OPTIONS, $timeout, DT_LAST_ROW_KEY, $DTBootstrap) {
-        var $loading = angular.element('<h3>Loading...</h3>'),
+    directive('datatable', function(DT_DEFAULT_OPTIONS, $timeout, DT_LAST_ROW_KEY, $DTBootstrap, DTLoadingTemplate) {
+        var $loading = angular.element(DTLoadingTemplate.html),
             _showLoading = function ($elem) {
                 $elem.after($loading);
                 $elem.hide();

src/angular-datatables.directive.js

@@ -512,5 +512,10 @@
                 return column;
             }
         };
+    }).
+    factory('DTLoadingTemplate', function() {
+        return {
+            html: '<h3 class="dt-loading">Loading...</h3>'
+        };
     });
 })(jQuery, angular);

src/angular-datatables.factory.js

@@ -208,6 +208,10 @@ pre code {
     border-bottom: 1px solid #c2c2c2;
 }
 
+.showcase.no-tab {
+    border-top: 1px solid #c2c2c2;
+}
+
 .api .showcase .tab-content {
     padding: 10px
 }