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

Commit 89d5bc6

Browse files
l-linl-lin
committed
Integration with angular-translate #99
* Resolve all promises before rendering
1 parent 294eae2 commit 89d5bc6

16 files changed

+4207
-1473
lines changed

‎demo/app.js

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
'use strict';
22
angular.module('datatablesSampleApp',
3-
['datatablesSampleApp.usages', 'ngResource', 'datatables', 'ui.bootstrap', 'ui.router', 'hljs'])
3+
['datatablesSampleApp.usages', 'ngResource', 'datatables', 'ui.bootstrap', 'ui.router', 'hljs', 'pascalprecht.translate'])
44
.config(sampleConfig)
55
.config(routerConfig)
6+
.config(translateConfig)
67
.factory('DTLoadingTemplate', dtLoadingTemplate);
78

89
backToTop.init({
@@ -55,6 +56,15 @@ function routerConfig($stateProvider, $urlRouterProvider, USAGES) {
5556
});
5657
}
5758

59+
function translateConfig($translateProvider) {
60+
$translateProvider.translations('en', {
61+
id: 'ID with angular-translate',
62+
firstName: 'First name with angular-translate',
63+
lastName: 'Last name with angular-translate'
64+
});
65+
$translateProvider.preferredLanguage('en');
66+
}
67+
5868
function dtLoadingTemplate() {
5969
return {
6070
html: '<img src="/angular-datatables/images/loading.gif" />'

‎demo/partials/gettingStarted.html

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ <h3>Dependencies</h3>
1111
<ul>
1212
<li><a href="http://angular.org">AngularJS</a> version 1.3.0+</li>
1313
<li><a href="http://jquery.com">JQuery</a> version 1.11.0+</li>
14-
<li><a href="https://datatables.net">Datatables</a> version 1.10+</li>
14+
<li><a href="https://datatables.net">DataTables</a> version 1.10+</li>
1515
</ul>
1616
<p>
1717
This module has been tested with the following datatables modules:
@@ -88,12 +88,41 @@ <h3>Additional Notes</h3>
8888
</li>
8989
<li>
9090
<p>
91-
<code>Angular Datatables</code> is using <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/create"><code>Object.create()</code></a> to instanciate options and columns.
91+
<code>Angular DataTables</code> is using <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/create"><code>Object.create()</code></a> to instanciate options and columns.
9292
</p>
9393
<p>
9494
If you need to support IE8, then you need to add this <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create#Polyfill"><code>Polyfill</code></a>.
9595
</p>
9696
</li>
97+
<li>
98+
<p>
99+
When providing the DT options, <code>Angular DataTables</code> will resolve every promises (except the
100+
attributes <code>data</code> and <code>aaData</code>) before rendering the DataTable.
101+
</p>
102+
<p>
103+
For example, suppose we provide the following code:
104+
</p>
105+
<div hljs language="js">
106+
angular.module('yourModule')
107+
.controller('MyCtrl', MyCtrl);
108+
109+
function MyCtrl($q, DTOptionsBuilder) {
110+
var vm = this;
111+
vm.dtOptions = DTOptionBuilder.newOptions()
112+
.withOptions('autoWidth', fnThatReturnsAPromise);
113+
114+
function fnThatReturnsAPromise() {
115+
var defer = $q.defer();
116+
defer.resolve(false);
117+
return defer.promise;
118+
}
119+
}
120+
</div>
121+
<p>
122+
The <code>fnThatReturnsAPromise</code> will first be resolved and then the DataTable will
123+
be rendered with the option <code>autoWidth</code> set to <code>false</code>.
124+
</p>
125+
</li>
97126
</ul>
98127

99128
</section>

‎demo/usages.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,5 +75,8 @@ angular.module('datatablesSampleApp.usages', ['ngResource'])
7575
}, {
7676
name: 'overrideBootstrapOptions',
7777
label: 'Override Bootstrap options'
78+
}, {
79+
name: 'withAngularTranslate',
80+
label: 'With Angular Translate'
7881
}]
7982
});

‎demo/withPlugins/withAngularTranslate.html

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<article class="main-content">
2+
<header class="article-header">
3+
<h1><i class="fa fa-play"></i>&nbsp;With <a href="http://angular-translate.github.io">Angular Translate</a></h1>
4+
</header>
5+
<section class="article-content">
6+
<p>
7+
You can use <code>Angular Translate</code> with Angular DataTables seamlessly.
8+
</p>
9+
</section>
10+
<section class="showcase">
11+
<tabset>
12+
<tab heading="Preview">
13+
<article class="preview">
14+
<div ng-controller="WithAngularTranslateCtrl as showCase">
15+
<table datatable="" dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" class="table table-striped table-bordered"></table>
16+
</div>
17+
</article>
18+
</tab>
19+
<tab heading="HTML">
20+
<div hljs>
21+
<div ng-controller="WithAngularTranslateCtrl as showCase">
22+
<table datatable="" dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" class="table table-striped table-bordered"></table>
23+
</div>
24+
<!-- ... -->
25+
<script src="vendor/angular-translate/angular-translate.min.js"></script>
26+
</div>
27+
</tab>
28+
<tab heading="JS">
29+
<div hljs language="js">
30+
angular.module('datatablesSampleApp', ['datatables', 'pascalprecht.translate'])
31+
.config(translateConfig)
32+
.controller('WithAngularTranslateCtrl', WithAngularTranslateCtrl);
33+
34+
function translateConfig($translateProvider) {
35+
$translateProvider.translations('en', {
36+
id: 'ID with angular-translate',
37+
firstName: 'First name with angular-translate',
38+
lastName: 'Last name with angular-translate'
39+
});
40+
$translateProvider.preferredLanguage('en');
41+
}
42+
43+
function WithAngularTranslateCtrl(DTOptionsBuilder, DTColumnBuilder, $translate) {
44+
var vm = this;
45+
vm.dtOptions = DTOptionsBuilder.fromSource('data.json');
46+
vm.dtColumns = [
47+
// You can provide the title directly in the newColum second parameter
48+
DTColumnBuilder.newColumn('id', $translate('id')),
49+
// Or you can use the withTitle helper
50+
DTColumnBuilder.newColumn('firstName').withTitle($translate('firstName')),
51+
DTColumnBuilder.newColumn('lastName').withTitle($translate('lastName'))
52+
];
53+
}
54+
</div>
55+
</tab>
56+
</tabset>
57+
</section>
58+
</article>

‎demo/withPlugins/withAngularTranslate.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
'use strict';
2+
angular.module('datatablesSampleApp').controller('WithAngularTranslateCtrl', WithAngularTranslateCtrl);
3+
4+
function WithAngularTranslateCtrl(DTOptionsBuilder, DTColumnBuilder, $translate) {
5+
var vm = this;
6+
vm.dtOptions = DTOptionsBuilder.fromSource('data.json');
7+
vm.dtColumns = [
8+
DTColumnBuilder.newColumn('id', $translate('id')),
9+
DTColumnBuilder.newColumn('firstName').withTitle($translate('firstName')),
10+
DTColumnBuilder.newColumn('lastName').withTitle($translate('lastName'))
11+
];
12+
}

0 commit comments

Comments
 (0)