Skip to content

Commit 57815f7

Browse files
l-linl-lin
committed
Add examples + Reload Ajax (feature l-lin#15)
1 parent f3416fd commit 57815f7

29 files changed

+1111
-205
lines changed

‎data1.json

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
[{
2+
"id": 860,
3+
"firstName": "Superman",
4+
"lastName": "Yoda"
5+
}, {
6+
"id": 870,
7+
"firstName": "Foo",
8+
"lastName": "Whateveryournameis"
9+
}, {
10+
"id": 590,
11+
"firstName": "Toto",
12+
"lastName": "Titi"
13+
}]

‎demo/app.js

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,47 @@
11
(function(angular) {
22
'use strict';
3-
angular.module('datatablesSampleApp', ['datatables', 'ui.bootstrap.collapse']).
3+
angular.module('datatablesSampleApp', ['ngResource', 'datatables', 'ui.bootstrap.collapse']).
44
controller('apiCtrl', function($scope, DTOptionsBuilder) {
55
$scope.dtOptions = DTOptionsBuilder.newOptions()
66
.withDisplayLength(10)
77
.withColReorder()
88
.withColVis()
99
.withOption('bAutoWidth', false)
1010
.withTableTools('vendor/datatables-tabletools/swf/copy_csv_xls_pdf.swf');
11+
}).
12+
factory('sampleFactory', function($resource) {
13+
return {
14+
getData: function() {
15+
return $resource('data').query().$promise;
16+
},
17+
getData1: function() {
18+
return $resource('data1.json').query().$promise;
19+
}
20+
};
21+
}).
22+
controller('sampleCtrl', function($scope, DTOptionsBuilder, DTColumnBuilder, sampleFactory) {
23+
$scope.reload = function() {
24+
$scope.dtOptions.reloadData();
25+
// $scope.dtOptions.dataPromise = sampleFactory.getData();
26+
};
27+
$scope.changeData = function() {
28+
$scope.dtOptions.sAjaxSource = 'data1.json';
29+
$scope.dtOptions.dataPromise = sampleFactory.getData1();
30+
};
31+
32+
$scope.persons = [];
33+
sampleFactory.getData().then(function(persons) {
34+
$scope.persons = persons;
35+
});
36+
37+
$scope.dtOptions = DTOptionsBuilder.fromSource('data').withPaginationType('full_numbers');
38+
// $scope.dtOptions = DTOptionsBuilder.fromPromise(sampleFactory.getData()).withPaginationType('full_numbers');
39+
// $scope.dtOptions = DTOptionsBuilder.newOptions().withPaginationType('full_numbers');
40+
41+
$scope.dtColumns = [
42+
DTColumnBuilder.newColumn('id').withTitle('ID'),
43+
DTColumnBuilder.newColumn('firstName').withTitle('First name'),
44+
DTColumnBuilder.newColumn('lastName').withTitle('Last name').notVisible()
45+
];
1146
});
1247
})(angular);

‎demo/partials/all_in_one.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
<h3 ng-click="isCollapsed = !isCollapsed" class="btn btn-default">
1+
<h3 ng-click="isCollapsed = !isCollapsed" class="btn btn-info">
22
All in one
33
</h3>
4-
<div collapse="!isCollapsed">
4+
<div class="article-content" collapse="!isCollapsed">
55
<p>
66
Example with everything in da box!
77
</p>

‎demo/partials/angular_way.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
<h3 ng-click="isCollapsed = !isCollapsed" class="btn btn-default">
1+
<h3 ng-click="isCollapsed = !isCollapsed" class="btn btn-info">
22
The Angular way
33
</h3>
4-
<div collapse="!isCollapsed">
4+
<div class="article-content" collapse="!isCollapsed">
55
<p>
66
You can construct your table the "angular" way, eg using the directive <code>ng-repeat</code> on <code>tr</code> tag.
77
All you need to do is to add the directive <code>datatable</code> and <code>dt-rows</code> on your table in order

‎demo/partials/bootstrap.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
<h3 ng-click="isCollapsed = !isCollapsed" class="btn btn-default">
1+
<h3 ng-click="isCollapsed = !isCollapsed" class="btn btn-info">
22
Bootstrap integration
33
</h3>
4-
<div collapse="!isCollapsed">
4+
<div class="article-content" collapse="!isCollapsed">
55
<p>
66
Angular Datables can also be compatible with <a href="http://getbootstrap.com">Twitter Bootstrap 3</a>.
77
</p>

‎demo/partials/data_reload_with_ajax.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<h3 ng-click="isCollapsed = !isCollapsed" class="btn btn-info">
2+
Reload the table data from an Ajax source
3+
</h3>
4+
<div class="article-content" collapse="!isCollapsed">
5+
<p>
6+
This module also handles data reloading / loading from an Ajax source.
7+
</p>
8+
<p>
9+
However, you need to either have the <a href="https://next.datatables.net/plug-ins/api/fnReloadAjax">fnReloadAjax
10+
plugin</a> or have a recent version
11+
of DataTable (v1.10+).
12+
</p>
13+
<iframe class="demo-preview" height="420px" src="http://embed.plnkr.co/DD4D6VpSoQCdpzWaSud5/preview"></iframe>
14+
</div>

‎demo/partials/data_reload_with_promise.html

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<h3 ng-click="isCollapsed = !isCollapsed" class="btn btn-info">
2+
Reload the table data from a promise
3+
</h3>
4+
<div class="article-content" collapse="!isCollapsed">
5+
<p>
6+
In some case, you need to load some new data. This module handles data loading seamlessly.
7+
</p>
8+
<iframe class="demo-preview" height="420px" src="http://embed.plnkr.co/dyySAQcMedAINzZobYPv/preview"></iframe>
9+
</div>

‎demo/partials/getting_started.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,6 @@ <h3>Installation</h3>
5656
<section>
5757
<h3>Additional Notes</h3>
5858
<p>
59-
This module does not support multiple datatables in the same page YET!
59+
This module does not support multiple datatables in the same page (YET)! You can do it, but expect some side effects!
6060
</p>
6161
</section>

‎demo/partials/test.html

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<section class="article-content" ng-controller="sampleCtrl">
2+
<input ng-click="reload()" type="button" value="Reload"/>
3+
<input ng-click="changeData()" type="button" value="Change data"/>
4+
5+
<table datatable dt-options="dtOptions" dt-columns="dtColumns"></table>
6+
7+
<!--<table datatable dt-options="dtOptions" dt-columns="dtColumns">-->
8+
<!--<thead>-->
9+
<!--<tr>-->
10+
<!--<th>ID</th>-->
11+
<!--<th>First name</th>-->
12+
<!--<th>Last name</th>-->
13+
<!--</tr>-->
14+
<!--</thead>-->
15+
<!--<tbody>-->
16+
<!--<tr>-->
17+
<!--<td>1</td>-->
18+
<!--<td>Foo</td>-->
19+
<!--<td>Bar</td>-->
20+
<!--</tr>-->
21+
<!--<tr>-->
22+
<!--<td>123</td>-->
23+
<!--<td>Someone</td>-->
24+
<!--<td>Youknow</td>-->
25+
<!--</tr>-->
26+
<!--<tr>-->
27+
<!--<td>987</td>-->
28+
<!--<td>Iamout</td>-->
29+
<!--<td>Ofinspiration</td>-->
30+
<!--</tr>-->
31+
<!--</tbody>-->
32+
<!--</table>-->
33+
34+
<!--<table datatable dt-options="dtOptions" dt-columns="dtColumns">-->
35+
<!--<thead>-->
36+
<!--<tr>-->
37+
<!--<th>ID</th>-->
38+
<!--<th>First name</th>-->
39+
<!--<th>Last name</th>-->
40+
<!--</tr>-->
41+
<!--</thead>-->
42+
<!--<tbody>-->
43+
<!--<tr dt-rows ng-repeat="person in persons">-->
44+
<!--<td>{{ person.id }}</td>-->
45+
<!--<td>{{ person.firstName }}</td>-->
46+
<!--<td>{{ person.lastName }}</td>-->
47+
<!--</tr>-->
48+
<!--</tbody>-->
49+
<!--</table>-->
50+
</section>

‎demo/partials/with_ajax.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
<h3 ng-click="isCollapsed = !isCollapsed" class="btn btn-default">
1+
<h3 ng-click="isCollapsed = !isCollapsed" class="btn btn-info">
22
With ajax
33
</h3>
4-
<div collapse="!isCollapsed">
4+
<div class="article-content" collapse="!isCollapsed">
55
<p>
66
You can also fetch the data from a server using an Ajax call.
77
</p>

‎demo/partials/with_col_reorder.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
<h3 ng-click="isCollapsed = !isCollapsed" class="btn btn-default">
1+
<h3 ng-click="isCollapsed = !isCollapsed" class="btn btn-info">
22
With the datatables <a href="https://datatables.net/extras/colreorder/">ColReorder</a>
33
</h3>
4-
<div collapse="!isCollapsed">
4+
<div class="article-content" collapse="!isCollapsed">
55
<p>
66
The <code>angular-datatables</code> also provides an API in order to make the plugin <code>ColReorder</code> works with datatables.
77
</p>

‎demo/partials/with_col_vis.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
<h3 ng-click="isCollapsed = !isCollapsed" class="btn btn-default">
1+
<h3 ng-click="isCollapsed = !isCollapsed" class="btn btn-info">
22
With the datatables <a href="https://datatables.net/extras/colvis/">ColVis</a>
33
</h3>
4-
<div collapse="!isCollapsed">
4+
<div class="article-content" collapse="!isCollapsed">
55
<p>
66
The <code>angular-datatables</code> also provides an API in order to make the plugin <code>ColVis</code> works with datatables.
77
</p>

‎demo/partials/with_options.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
<h3 ng-click="isCollapsed = !isCollapsed" class="btn btn-default">
1+
<h3 ng-click="isCollapsed = !isCollapsed" class="btn btn-info">
22
With options
33
</h3>
4-
<div collapse="!isCollapsed">
4+
<div class="article-content" collapse="!isCollapsed">
55
<p>
66
The <code>angular-datatables</code> provides the helper <code>DTOptionsBuilder</code> that lets you build the datatables options.
77
</p>

‎demo/partials/with_promise.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
<h3 ng-click="isCollapsed = !isCollapsed" class="btn btn-default">
1+
<h3 ng-click="isCollapsed = !isCollapsed" class="btn btn-info">
22
With promise
33
</h3>
4-
<div collapse="!isCollapsed">
4+
<div class="article-content" collapse="!isCollapsed">
55
<p>
66
You can also fetch the data from a server using a promise.
77
</p>

‎demo/partials/with_table_tools.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
<h3 ng-click="isCollapsed = !isCollapsed" class="btn btn-default">
1+
<h3 ng-click="isCollapsed = !isCollapsed" class="btn btn-info">
22
With the datatables <a href="https://datatables.net/extras/tabletools/">TableTools</a>
33
</h3>
4-
<div collapse="!isCollapsed">
4+
<div class="article-content" collapse="!isCollapsed">
55
<p>
66
The <code>angular-datatables</code> also provides an API in order to make the plugin <code>TableTools</code> works with datatables.
77
</p>

‎demo/partials/zero_config.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
<h3 ng-click="isCollapsed = !isCollapsed" class="btn btn-default">
1+
<h3 ng-click="isCollapsed = !isCollapsed" class="btn btn-info">
22
Zero configuration
33
</h3>
4-
<div collapse="!isCollapsed">
4+
<div class="article-content" collapse="!isCollapsed">
55
<p>
66
The <code>angular-datatables</code> provides a <code>datatables</code> directive you can add to your <code>&lt;table&gt;</code>:
77
</p>

0 commit comments

Comments
 (0)