Skip to content

Commit 941cd11

Browse files
l-linl-lin
committed
Adding promise ⭐ l-lin#14 
1 parent 39656a7 commit 941cd11

9 files changed

+142
-56
lines changed

‎demo/partials/api.html

+26-2
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,20 @@ <h3>DTOptionsBuilder</h3>
5757
<tr>
5858
<td><code>DTOptions</code></td>
5959
<td><code>withOption(key, value)</code></td>
60-
<td>Add an option to the wrapped datatables options.</td>
60+
<td>
61+
Add an option to the wrapped datatables options. For example, the following code add the option <code>fnRowCallback</code>:
62+
<div class="highlight">
63+
<pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">angular</span><span class="p">.</span><span class="nx">module</span><span class="p">(</span><span class="s1">'myModule'</span><span class="p">,</span> <span class="p">[</span><span class="s1">'datatables'</span><span class="p">]).</span>
64+
<span class="nx">controller</span><span class="p">(</span><span class="s1">'myCtrl'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">$scope</span><span class="p">,</span> <span class="nx">DTOptionsBuilder</span><span class="p">)</span> <span class="p">{</span>
65+
<span class="nx">$scope</span><span class="p">.</span><span class="nx">dtOptions</span> <span class="o">=</span> <span class="nx">DTOptionsBuilder</span><span class="p">.</span><span class="nx">newOptions</span><span class="p">()</span>
66+
<span class="p">.</span><span class="nx">withOption</span><span class="p">(</span><span class="s1">'fnRowCallback'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">nRow</span><span class="p">,</span> <span class="nx">aData</span><span class="p">,</span> <span class="nx">iDisplayIndex</span><span class="p">,</span> <span class="nx">iDisplayIndexFull</span><span class="p">)</span> <span class="p">{</span>
67+
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">aData</span><span class="p">);</span>
68+
<span class="k">return</span> <span class="nx">nRow</span><span class="p">;</span>
69+
<span class="p">});</span>
70+
<span class="p">});</span>
71+
</code></pre>
72+
</div>
73+
</td>
6174
</tr>
6275
<tr>
6376
<td><code>DTOptions</code></td>
@@ -152,7 +165,18 @@ <h3>DTOptionsBuilder</h3>
152165
<tr>
153166
<td><code>DTColumn</code></td>
154167
<td><code>withOption(key, value)</code></td>
155-
<td>Add the option of the column.</td>
168+
<td>
169+
Add the option of the column. For example, the following code add the option <code>sContentPadding</code>:
170+
<div class="highlight">
171+
<pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">angular</span><span class="p">.</span><span class="nx">module</span><span class="p">(</span><span class="s1">'myModule'</span><span class="p">,</span> <span class="p">[</span><span class="s1">'datatables'</span><span class="p">]).</span>
172+
<span class="nx">controller</span><span class="p">(</span><span class="s1">'myCtrl'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">$scope</span><span class="p">,</span> <span class="nx">DTColumnBuilder</span><span class="p">)</span> <span class="p">{</span>
173+
<span class="nx">$scope</span><span class="p">.</span><span class="nx">dtColumns</span> <span class="o">=</span> <span class="p">[</span>
174+
<span class="nx">DTColumnBuilder</span><span class="p">.</span><span class="nx">newColumn</span><span class="p">(</span><span class="s1">'foo'</span><span class="p">).</span><span class="nx">withOption</span><span class="p">(</span><span class="s1">'sContentPadding'</span><span class="p">,</span> <span class="s1">'mmm'</span><span class="p">)</span>
175+
<span class="p">];</span>
176+
<span class="p">});</span>
177+
</code></pre>
178+
</div>
179+
</td>
156180
</tr>
157181
<tr>
158182
<td><code>DTColumn</code></td>

‎demo/partials/getting_started.html

+1
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ <h3>Installation</h3>
4949
Declare dependencies on your module app like this:
5050
<div class="highlight">
5151
<pre><code class="javascript"><span class="nx">angular</span><span class="p">.</span><span class="nx">module</span><span class="p">(</span><span class="s1">'myModule'</span><span class="p">,</span> <span class="p">[</span><span class="s1">'datatables'</span><span class="p">]);</span></code></pre>
52+
</div>
5253
</p>
5354
</section>
5455
<section>

‎demo/partials/with_ajax.html

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
<h3>With ajax</h3>
22
<p>
3-
You can also fetch the data from a server.
3+
You can also fetch the data from a server using an Ajax call.
44
</p>
55
<p>
6-
The <code>angular-datatables</code> provides the directive <code>datatable-ajax</code> and the helper <code>DTColumnBuilder</code> that lets you build the datatables options for each column.
6+
The <code>angular-datatables</code> provides the helper <code>DTOptionsBuilder.withSource(sAjaxSource)</code>
7+
and the helper <code>DTColumnBuilder</code> that lets you build the datatables options for each column.
78
</p>
89
<p>
910
See the API for the complete list of methods of the helper.

‎demo/partials/with_promise.html

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<h3>With promise</h3>
2+
<p>
3+
You can also fetch the data from a server using a promise.
4+
</p>
5+
<p>
6+
The <code>angular-datatables</code> provides the helper <code>DTOptionsBuilder.withPromise(dataPromise)</code>
7+
and the helper <code>DTColumnBuilder</code> that lets you build the datatables options for each column.
8+
</p>
9+
<p>
10+
See the API for the complete list of methods of the helper.
11+
</p>
12+
<iframe class="demo-preview" height="420px" src="http://embed.plnkr.co/gyAmixA0pTfNt9F1L2Px/preview"></iframe>

‎dist/angular-datatables.js

+38-17
Original file line numberDiff line numberDiff line change
@@ -214,6 +214,12 @@
214214
'DT_DEFAULT_OPTIONS',
215215
'$timeout',
216216
function ($http, DT_DEFAULT_OPTIONS, $timeout) {
217+
var _renderDataTable = function ($elem, options) {
218+
// Add $timeout to be sure that angular has finished rendering before calling datatables
219+
$timeout(function () {
220+
$elem.dataTable(options);
221+
}, 0, false);
222+
};
217223
return {
218224
restrict: 'A',
219225
scope: {
@@ -228,24 +234,25 @@
228234
if (angular.isArray($scope.dtColumns)) {
229235
options.aoColumns = $scope.dtColumns;
230236
}
231-
// Define defaults values in case it is an ajax datatables
232-
if (angular.isDefined(options.sAjaxSource)) {
233-
if (angular.isUndefined(options.sAjaxDataProp)) {
234-
options.sAjaxDataProp = DT_DEFAULT_OPTIONS.sAjaxDataProp;
235-
}
236-
if (angular.isUndefined(options.aoColumns)) {
237-
options.aoColumns = DT_DEFAULT_OPTIONS.aoColumns;
237+
if (angular.isDefined(options.dataPromise)) {
238+
options.dataPromise.then(function (data) {
239+
options.aaData = data;
240+
_renderDataTable($elem, options);
241+
});
242+
} else {
243+
// Define defaults values in case it is an ajax datatables
244+
if (angular.isDefined(options.sAjaxSource)) {
245+
if (angular.isUndefined(options.sAjaxDataProp)) {
246+
options.sAjaxDataProp = DT_DEFAULT_OPTIONS.sAjaxDataProp;
247+
}
248+
if (angular.isUndefined(options.aoColumns)) {
249+
options.aoColumns = DT_DEFAULT_OPTIONS.aoColumns;
250+
}
238251
}
252+
_renderDataTable($elem, options);
239253
}
240-
// Add $timeout to be sure that angular has finished rendering before calling datatables
241-
$timeout(function () {
242-
$elem.dataTable(options);
243-
}, 0, false);
244254
} else {
245-
// Add $timeout to be sure that angular has finished rendering before calling datatables
246-
$timeout(function () {
247-
$elem.dataTable();
248-
}, 0, false);
255+
_renderDataTable($elem);
249256
}
250257
}
251258
};
@@ -289,9 +296,11 @@
289296
/**
290297
* The wrapped datatables options class
291298
* @param sAjaxSource the ajax source to fetch the data
299+
* @param dataPromise the promise to fetch the data
292300
*/
293-
var DTOptions = function (sAjaxSource) {
301+
var DTOptions = function (sAjaxSource, dataPromise) {
294302
this.sAjaxSource = sAjaxSource;
303+
this.dataPromise = dataPromise;
295304
/**
296305
* Optional class to handle undefined or null
297306
* @param obj the object to wrap
@@ -416,6 +425,15 @@
416425
this.iDisplayLength = iDisplayLength;
417426
return this;
418427
};
428+
/**
429+
* Set the promise to fetch the data
430+
* @param dataPromise the promise
431+
* @returns {DTOptions} the options
432+
*/
433+
this.withDataPromise = function (dataPromise) {
434+
this.dataPromise = dataPromise;
435+
return this;
436+
};
419437
// BOOTSTRAP INTEGRATION ---------
420438
// See http://getbootstrap.com
421439
/**
@@ -556,7 +574,10 @@
556574
return new DTOptions();
557575
},
558576
fromSource: function (sAjaxSource) {
559-
return new DTOptions(sAjaxSource);
577+
return new DTOptions(sAjaxSource, null);
578+
},
579+
fromPromise: function (dataPromise) {
580+
return new DTOptions(null, dataPromise);
560581
}
561582
};
562583
}

0 commit comments

Comments
 (0)