Skip to content
This repository was archived by the owner on Feb 2, 2025. It is now read-only.

Commit 5a4244a

Browse files
l-linl-lin
committed
Loading DT options with a promise #113 
1 parent 4238bb4 commit 5a4244a

11 files changed

+192
-65
lines changed

‎demo/advanced/loadOptionsWithPromise.html

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<article class="main-content">
2+
<header class="article-header">
3+
<h1>
4+
<i class="fa fa-play"></i>&nbsp;
5+
Load DataTables
6+
<a href="https://datatables.net/reference/option/">options</a>/
7+
<a href="https://datatables.net/reference/option/columns">columns</a>/
8+
<a href="https://datatables.net/reference/option/columnDefs">columnDefs</a>
9+
with promise
10+
</h1>
11+
</header>
12+
<section class="article-content">
13+
<p>
14+
Sometimes, your DataTable options/columns/columnDefs are stored or computed server side.
15+
All you need to do is to return the expected result as a promise.
16+
</p>
17+
</section>
18+
<section class="showcase">
19+
<tabset>
20+
<tab heading="Preview">
21+
<article class="preview">
22+
<div ng-controller="loadOptionsWithPromiseCtrl">
23+
<table datatable dt-options="dtOptions" dt-columns="dtColumns" class="row-border hover">
24+
</table>
25+
</div>
26+
</article>
27+
</tab>
28+
<tab heading="HTML">
29+
<div hljs>
30+
<div ng-controller="loadOptionsWithPromiseCtrl">
31+
<table datatable dt-options="dtOptions" dt-columns="dtColumns" class="row-border hover">
32+
</table>
33+
</div>
34+
</div>
35+
</tab>
36+
<tab heading="JS">
37+
<div hljs language="js">
38+
angular.module('datatablesSampleApp')
39+
.controller('loadOptionsWithPromiseCtrl', function ($q, $scope, $resource) {
40+
$scope.dtOptions = $resource('/angular-datatables/dtOptions.json').get().$promise;
41+
$scope.dtColumns = $resource('/angular-datatables/dtColumns.json').query().$promise;
42+
});
43+
</div>
44+
</tab>
45+
<tab heading="Example data">
46+
<p class="example-data">
47+
<a target="_blank" href="/angular-datatables/dtOptions.json" tooltip="dtOptions.json">dtOptions.json&nbsp;<i class="fa fa-external-link"></i></a>
48+
</p>
49+
<div hljs language="json" class="example-data-showcase">
50+
{
51+
"ajax": "/angular-datatables/data.json",
52+
"dom": "<'top'i>rt<'bottom'flp><'clear'>",
53+
"pagingType": "full_numbers"
54+
}
55+
</div>
56+
<p class="example-data">
57+
<a target="_blank" href="/angular-datatables/dtColumns.json" tooltip="dtColumns.json">dtColumns.json&nbsp;<i class="fa fa-external-link"></i></a>
58+
</p>
59+
<div hljs language="json">
60+
[{
61+
"data": "id",
62+
"title": "ID"
63+
}, {
64+
"data": "firstName",
65+
"title": "First name"
66+
}, {
67+
"data": "lastName",
68+
"title": "Last name",
69+
"visible": false
70+
}]
71+
</div>
72+
</tab>
73+
</tabset>
74+
</section>
75+
</article>

‎demo/advanced/loadOptionsWithPromise.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
'use strict';
2+
angular.module('datatablesSampleApp')
3+
.controller('loadOptionsWithPromiseCtrl', function ($q, $scope, $resource) {
4+
$scope.dtOptions = $resource('/angular-datatables/dtOptions.json').get().$promise;
5+
$scope.dtColumns = $resource('/angular-datatables/dtColumns.json').query().$promise;
6+
});

‎demo/basic/angularWay.html

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,6 @@ <h1><i class="fa fa-play"></i>&nbsp;The Angular way</h1>
1919
<li>
2020
Don't forget to set the properties <code>ng</code> in the directive <code>datatable</code> in order to tell the directive to use the Angular way!
2121
</li>
22-
<li class="text-warning">
23-
<i class="fa fa-warning"></i>&nbsp;As of v0.1.0, the directive <code>dtRows</code> is deprecated.
24-
This directive is no longer needed. It will be removed completely from v0.2.0
25-
</li>
2622
</ul>
2723
<div class="alert alert-danger">
2824
<p>

‎demo/usages.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,9 @@ angular.module('datatablesSampleApp.usages', ['ngResource'])
4444
}, {
4545
name: 'changeOptions',
4646
label: 'Change options'
47+
}, {
48+
name: 'loadOptionsWithPromise',
49+
label: 'Load DT options with promise'
4750
}],
4851
withPlugins: [{
4952
name: 'withColReorder',

‎dist/angular-datatables.js

Lines changed: 42 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -356,11 +356,12 @@
356356
'datatables.renderer',
357357
'datatables.options'
358358
]).directive('datatable', [
359+
'$q',
359360
'DT_DEFAULT_OPTIONS',
360361
'DTBootstrap',
361362
'DTRendererFactory',
362363
'DTRendererService',
363-
function (DT_DEFAULT_OPTIONS, DTBootstrap, DTRendererFactory, DTRendererService) {
364+
function ($q, DT_DEFAULT_OPTIONS, DTBootstrap, DTRendererFactory, DTRendererService) {
364365
return {
365366
restrict: 'A',
366367
scope: {
@@ -378,7 +379,7 @@
378379
// Do not rerender if we want to reload. There are already
379380
// some watchers in the renderers.
380381
if (!newDTOptions.reload || newDTOptions.sAjaxSource !== oldDTOptions.sAjaxSource) {
381-
ctrl.render($elem, ctrl.buildOptions(), _staticHTML);
382+
ctrl.render($elem, ctrl.buildOptionsPromise(), _staticHTML);
382383
} else {
383384
// The reload attribute is set to false here in order
384385
// to recall this watcher again
@@ -387,7 +388,7 @@
387388
}
388389
}, true);
389390
ctrl.showLoading($elem);
390-
ctrl.render($elem, ctrl.buildOptions(), _staticHTML);
391+
ctrl.render($elem, ctrl.buildOptionsPromise(), _staticHTML);
391392
};
392393
},
393394
controller: [
@@ -397,37 +398,48 @@
397398
this.showLoading = function ($elem) {
398399
DTRendererService.showLoading($elem);
399400
};
400-
this.buildOptions = function () {
401+
this.buildOptionsPromise = function () {
402+
var defer = $q.defer();
401403
// Build options
402-
var options;
403-
if (angular.isDefined($scope.dtOptions)) {
404-
options = {};
405-
angular.extend(options, $scope.dtOptions);
406-
// Set the columns
407-
if (angular.isArray($scope.dtColumns)) {
408-
options.aoColumns = $scope.dtColumns;
409-
}
410-
// Set the column defs
411-
if (angular.isArray($scope.dtColumnDefs)) {
412-
options.aoColumnDefs = $scope.dtColumnDefs;
404+
$q.all([
405+
$q.when($scope.dtOptions),
406+
$q.when($scope.dtColumns),
407+
$q.when($scope.dtColumnDefs)
408+
]).then(function (results) {
409+
var dtOptions = results[0], dtColumns = results[1], dtColumnDefs = results[2];
410+
var options;
411+
if (angular.isDefined($scope.dtOptions)) {
412+
options = {};
413+
angular.extend(options, dtOptions);
414+
// Set the columns
415+
if (angular.isArray(dtColumns)) {
416+
options.aoColumns = dtColumns;
417+
}
418+
// Set the column defs
419+
if (angular.isArray(dtColumnDefs)) {
420+
options.aoColumnDefs = dtColumnDefs;
421+
}
422+
// Integrate bootstrap (or not)
423+
if (options.integrateBootstrap) {
424+
DTBootstrap.integrate(options);
425+
} else {
426+
DTBootstrap.deIntegrate();
427+
}
413428
}
414-
// Integrate bootstrap (or not)
415-
if (options.integrateBootstrap) {
416-
DTBootstrap.integrate(options);
429+
defer.resolve(options);
430+
});
431+
return defer.promise;
432+
};
433+
this.render = function ($elem, optionsPromise, staticHTML) {
434+
optionsPromise.then(function (options) {
435+
var isNgDisplay = $scope.datatable && $scope.datatable === 'ng';
436+
// Render dataTable
437+
if (_renderer) {
438+
_renderer.withOptions(options).render($scope, $elem, staticHTML);
417439
} else {
418-
DTBootstrap.deIntegrate();
440+
_renderer = DTRendererFactory.fromOptions(options, isNgDisplay).render($scope, $elem, staticHTML);
419441
}
420-
}
421-
return options;
422-
};
423-
this.render = function ($elem, options, staticHTML) {
424-
var isNgDisplay = $scope.datatable && $scope.datatable === 'ng';
425-
// Render dataTable
426-
if (_renderer) {
427-
_renderer.withOptions(options).render($scope, $elem, staticHTML);
428-
} else {
429-
_renderer = DTRendererFactory.fromOptions(options, isNgDisplay).render($scope, $elem, staticHTML);
430-
}
442+
});
431443
};
432444
}
433445
]

‎dist/angular-datatables.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dtColumns.json

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
[{
2+
"data": "id",
3+
"title": "ID"
4+
}, {
5+
"data": "firstName",
6+
"title": "First name"
7+
}, {
8+
"data": "lastName",
9+
"title": "Last name",
10+
"visible": false
11+
}]

‎dtOptions.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"ajax": "/angular-datatables/data.json",
3+
"dom": "<'top'i>rt<'bottom'flp><'clear'>",
4+
"pagingType": "full_numbers"
5+
}

‎index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,7 @@ <h1>
9999
<script src="demo/advanced/dataReloadWithPromise.js"></script>
100100
<script src="demo/advanced/rowClickEvent.js"></script>
101101
<script src="demo/advanced/serverSideProcessing.js"></script>
102+
<script src="demo/advanced/loadOptionsWithPromise.js"></script>
102103
<script src="demo/withPlugins/bootstrapIntegration.js"></script>
103104
<script src="demo/withPlugins/overrideBootstrapOptions.js"></script>
104105
<script src="demo/withPlugins/withColReorder.js"></script>

‎src/angular-datatables.directive.js

Lines changed: 44 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use strict';
22

33
angular.module('datatables.directive', ['datatables.renderer', 'datatables.options'])
4-
.directive('datatable', function(DT_DEFAULT_OPTIONS, DTBootstrap, DTRendererFactory, DTRendererService) {
4+
.directive('datatable', function($q, DT_DEFAULT_OPTIONS, DTBootstrap, DTRendererFactory, DTRendererService) {
55
return {
66
restrict: 'A',
77
scope: {
@@ -20,7 +20,7 @@ angular.module('datatables.directive', ['datatables.renderer', 'datatables.optio
2020
// Do not rerender if we want to reload. There are already
2121
// some watchers in the renderers.
2222
if (!newDTOptions.reload || newDTOptions.sAjaxSource !== oldDTOptions.sAjaxSource) {
23-
ctrl.render($elem, ctrl.buildOptions(), _staticHTML);
23+
ctrl.render($elem, ctrl.buildOptionsPromise(), _staticHTML);
2424
} else {
2525
// The reload attribute is set to false here in order
2626
// to recall this watcher again
@@ -29,45 +29,59 @@ angular.module('datatables.directive', ['datatables.renderer', 'datatables.optio
2929
}
3030
}, true);
3131
ctrl.showLoading($elem);
32-
ctrl.render($elem, ctrl.buildOptions(), _staticHTML);
32+
ctrl.render($elem, ctrl.buildOptionsPromise(), _staticHTML);
3333
};
3434
},
3535
controller: function ($scope) {
3636
var _renderer;
3737
this.showLoading = function ($elem) {
3838
DTRendererService.showLoading($elem);
3939
};
40-
this.buildOptions = function () {
40+
this.buildOptionsPromise = function () {
41+
var defer = $q.defer();
4142
// Build options
42-
var options;
43-
if (angular.isDefined($scope.dtOptions)) {
44-
options = {};
45-
angular.extend(options, $scope.dtOptions);
46-
// Set the columns
47-
if (angular.isArray($scope.dtColumns)) {
48-
options.aoColumns = $scope.dtColumns;
49-
}
50-
// Set the column defs
51-
if (angular.isArray($scope.dtColumnDefs)) {
52-
options.aoColumnDefs = $scope.dtColumnDefs;
43+
$q.all([
44+
$q.when($scope.dtOptions),
45+
$q.when($scope.dtColumns),
46+
$q.when($scope.dtColumnDefs)
47+
]).then(function(results) {
48+
var dtOptions = results[0],
49+
dtColumns = results[1],
50+
dtColumnDefs = results[2];
51+
var options;
52+
if (angular.isDefined($scope.dtOptions)) {
53+
options = {};
54+
angular.extend(options, dtOptions);
55+
// Set the columns
56+
if (angular.isArray(dtColumns)) {
57+
options.aoColumns = dtColumns;
58+
}
59+
60+
// Set the column defs
61+
if (angular.isArray(dtColumnDefs)) {
62+
options.aoColumnDefs = dtColumnDefs;
63+
}
64+
// Integrate bootstrap (or not)
65+
if (options.integrateBootstrap) {
66+
DTBootstrap.integrate(options);
67+
} else {
68+
DTBootstrap.deIntegrate();
69+
}
5370
}
54-
// Integrate bootstrap (or not)
55-
if (options.integrateBootstrap) {
56-
DTBootstrap.integrate(options);
71+
defer.resolve(options);
72+
});
73+
return defer.promise;
74+
};
75+
this.render = function ($elem, optionsPromise, staticHTML) {
76+
optionsPromise.then(function(options) {
77+
var isNgDisplay = $scope.datatable && $scope.datatable === 'ng';
78+
// Render dataTable
79+
if (_renderer) {
80+
_renderer.withOptions(options).render($scope, $elem, staticHTML);
5781
} else {
58-
DTBootstrap.deIntegrate();
82+
_renderer = DTRendererFactory.fromOptions(options, isNgDisplay).render($scope, $elem, staticHTML);
5983
}
60-
}
61-
return options;
62-
};
63-
this.render = function ($elem, options, staticHTML) {
64-
var isNgDisplay = $scope.datatable && $scope.datatable === 'ng';
65-
// Render dataTable
66-
if (_renderer) {
67-
_renderer.withOptions(options).render($scope, $elem, staticHTML);
68-
} else {
69-
_renderer = DTRendererFactory.fromOptions(options, isNgDisplay).render($scope, $elem, staticHTML);
70-
}
84+
});
7185
};
7286
}
7387
};

‎styles/main.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -250,6 +250,10 @@ pre code {
250250
border-bottom: 1px solid #c2c2c2;
251251
}
252252

253+
.example-data-showcase {
254+
border-bottom: 1px solid #c2c2c2;
255+
}
256+
253257
/* ---------------------------------------- */
254258
/* Sidebar
255259
/* ---------------------------------------- */

0 commit comments

Comments
 (0)