Skip to content

Commit 91934d4

Browse files
l-linl-lin
committed
Change demos so that it's not using Plnkr part 1 (l-lin#24)
1 parent 60b14cb commit 91934d4

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+8478
-872
lines changed

‎.jshintrc

+1-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
"DataTable": false,
2626
"after": false,
2727
"afterEach": false,
28-
"angular": false,
28+
"backToTop": false,
2929
"before": false,
3030
"beforeEach": false,
3131
"browser": false,

‎demo/app.js

+68-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
(function(angular) {
1+
(function(angular, backToTop) {
22
'use strict';
3-
angular.module('datatablesSampleApp', ['ngResource', 'datatables', 'ui.bootstrap.collapse']).
3+
angular.module('datatablesSampleApp', ['ngResource', 'datatables', 'ui.bootstrap.collapse', 'ui.bootstrap.tabs', 'ui.router']).
44
controller('apiCtrl', function($scope, DTOptionsBuilder) {
55
$scope.dtOptions = DTOptionsBuilder.newOptions()
66
.withDisplayLength(10)
@@ -9,6 +9,66 @@
99
.withOption('bAutoWidth', false)
1010
.withTableTools('vendor/datatables-tabletools/swf/copy_csv_xls_pdf.swf');
1111
}).
12+
config(function($stateProvider, $urlRouterProvider) {
13+
$urlRouterProvider.otherwise('/gettingStarted');
14+
$stateProvider
15+
.state('gettingStarted', {
16+
url: '/gettingStarted',
17+
templateUrl: 'demo/partials/getting_started.html'
18+
})
19+
.state('zeroConfig', {
20+
url: '/zeroConfig',
21+
templateUrl: 'demo/partials/zero_config.html'
22+
})
23+
.state('withOptions', {
24+
url: '/withOptions',
25+
templateUrl: 'demo/partials/with_options.html'
26+
})
27+
.state('withPromise', {
28+
url: '/withPromise',
29+
templateUrl: 'demo/partials/with_promise.html'
30+
})
31+
.state('dataReloadWithPromise', {
32+
url: '/dataReloadWithPromise',
33+
templateUrl: 'demo/partials/data_reload_with_promise.html'
34+
})
35+
.state('withAjax', {
36+
url: '/withAjax',
37+
templateUrl: 'demo/partials/with_ajax.html'
38+
})
39+
.state('dataReloadWithAjax', {
40+
url: '/dataReloadWithAjax',
41+
templateUrl: 'demo/partials/data_reload_with_ajax.html'
42+
})
43+
.state('angularWay', {
44+
url: '/angularWay',
45+
templateUrl: 'demo/partials/angular_way.html'
46+
})
47+
.state('withColReorder', {
48+
url: '/withColReorder',
49+
templateUrl: 'demo/partials/with_col_reorder.html'
50+
})
51+
.state('withColVis', {
52+
url: '/withColVis',
53+
templateUrl: 'demo/partials/with_col_vis.html'
54+
})
55+
.state('withTableTools', {
56+
url: '/withTableTools',
57+
templateUrl: 'demo/partials/with_table_tools.html'
58+
})
59+
.state('bootstrap', {
60+
url: '/bootstrap',
61+
templateUrl: 'demo/partials/bootstrap.html'
62+
})
63+
.state('allInOne', {
64+
url: '/allInOne',
65+
templateUrl: 'demo/partials/all_in_one.html'
66+
})
67+
.state('api', {
68+
url: '/api',
69+
templateUrl: 'demo/partials/api.html'
70+
});
71+
}).
1272
factory('sampleFactory', function($resource) {
1373
return {
1474
getData: function() {
@@ -44,4 +104,9 @@
44104
DTColumnBuilder.newColumn('lastName').withTitle('Last name').notVisible()
45105
];
46106
});
47-
})(angular);
107+
108+
backToTop.init({
109+
theme: 'classic', // Available themes: 'classic', 'sky', 'slate'
110+
animation: 'fade' // Available animations: 'fade', 'slide'
111+
});
112+
})(angular, backToTop);

‎demo/partials/all_in_one.html

+11-9
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1-
<h3 ng-click="isCollapsed = !isCollapsed" class="btn btn-info">
2-
All in one
3-
</h3>
4-
<div class="article-content" collapse="!isCollapsed">
5-
<p>
6-
Example with everything in da box!
7-
</p>
8-
<iframe style="width: 100%; height: 650px; border: 1px solid #e5e5e5;" src="http://embed.plnkr.co/Eh4n7TlW1l77obVxWFNT/preview"></iframe>
9-
</div>
1+
<article class="main-content">
2+
<header class="article-header">
3+
<h1><i class="fa fa-play"></i>&nbsp;All in one</h1>
4+
</header>
5+
<section class="article-content">
6+
<p>
7+
Example with everything in da box!
8+
</p>
9+
<iframe style="width: 100%; height: 650px; border: 1px solid #e5e5e5;" src="http://embed.plnkr.co/Eh4n7TlW1l77obVxWFNT/preview"></iframe>
10+
</section>
11+
</article>

‎demo/partials/angular_way.html

+39-37
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,39 @@
1-
<h3 ng-click="isCollapsed = !isCollapsed" class="btn btn-info">
2-
The Angular way
3-
</h3>
4-
<div class="article-content" collapse="!isCollapsed">
5-
<p>
6-
You can construct your table the "angular" way, eg using the directive <code>ng-repeat</code> on <code>tr</code> tag.
7-
All you need to do is to add the directive <code>datatable</code> and <code>dt-rows</code> on your table in order
8-
to make it rendered with DataTables.
9-
</p>
10-
<iframe class="demo-preview" height="420px" src="http://embed.plnkr.co/zVJ1nLLPgExl3N2Sfqrj/preview"></iframe>
11-
<p>
12-
You can also provide datatable options and datatable column options with the directive
13-
<code>dt-options</code> and <code>dt-columns</code>:
14-
</p>
15-
<iframe class="demo-preview" height="200px" src="http://embed.plnkr.co/QI2Nv8KoARStqCzc69ko/preview"></iframe>
16-
<p>
17-
<strong>Note:</strong>
18-
</p>
19-
<ul>
20-
<li>
21-
The options do not override what you define in your template. It will just append its properties.
22-
</li>
23-
<li>
24-
If you use the Angular way of rendering the table along with the Ajax or the promise solution, the latter
25-
will be display.
26-
</li>
27-
<li>
28-
The Angular way is less performant than fetching the data with the Ajax/promise solutions. The lack of
29-
performance is due to the fact that Angular add the 2 way databinding to the data, which the ajax/promise solutions
30-
does not. However, you can use Angular directive (<code>ng-click</code>, <code>ng-controller</code>...) in there!
31-
</li>
32-
<li>
33-
Don't forget to set the properties <code>ng</code> in the directive <code>datatable</code> in order to tell the directive to use
34-
the Angular way!
35-
</li>
36-
</ul>
37-
</div>
1+
<article class="main-content">
2+
<header class="article-header">
3+
<h1><i class="fa fa-play"></i>&nbsp;The Angular way</h1>
4+
</header>
5+
<section class="article-content">
6+
<p>
7+
You can construct your table the "angular" way, eg using the directive <code>ng-repeat</code> on <code>tr</code> tag.
8+
All you need to do is to add the directive <code>datatable</code> and <code>dt-rows</code> on your table in order
9+
to make it rendered with DataTables.
10+
</p>
11+
<iframe class="demo-preview" height="420px" src="http://embed.plnkr.co/zVJ1nLLPgExl3N2Sfqrj/preview"></iframe>
12+
<p>
13+
You can also provide datatable options and datatable column options with the directive
14+
<code>dt-options</code> and <code>dt-columns</code>:
15+
</p>
16+
<iframe class="demo-preview" height="200px" src="http://embed.plnkr.co/QI2Nv8KoARStqCzc69ko/preview"></iframe>
17+
<p>
18+
<strong>Note:</strong>
19+
</p>
20+
<ul>
21+
<li>
22+
The options do not override what you define in your template. It will just append its properties.
23+
</li>
24+
<li>
25+
If you use the Angular way of rendering the table along with the Ajax or the promise solution, the latter
26+
will be display.
27+
</li>
28+
<li>
29+
The Angular way is less performant than fetching the data with the Ajax/promise solutions. The lack of
30+
performance is due to the fact that Angular add the 2 way databinding to the data, which the ajax/promise solutions
31+
does not. However, you can use Angular directive (<code>ng-click</code>, <code>ng-controller</code>...) in there!
32+
</li>
33+
<li>
34+
Don't forget to set the properties <code>ng</code> in the directive <code>datatable</code> in order to tell the directive to use
35+
the Angular way!
36+
</li>
37+
</ul>
38+
</section>
39+
</article>

0 commit comments

Comments
 (0)