Skip to content

Commit dc44cde

Browse files
l-linl-lin
committed
Remove dependency from Plnkr (l-lin#24)
1 parent 91934d4 commit dc44cde

File tree

93 files changed

+6585
-161
lines changed

Some content is hidden

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

93 files changed

+6585
-161
lines changed

‎demo/allInOne.js

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
/**
2+
* @author l.lin
3+
* @created 17/07/14 17:04
4+
*/
5+
(function() {
6+
'use strict';
7+
angular.module('datatablesSampleApp').controller('allInOneCtrl', function ($scope, DTOptionsBuilder, DTColumnBuilder) {
8+
$scope.dtOptions = DTOptionsBuilder
9+
.fromSource('data.json')
10+
// Add Bootstrap compatibility
11+
.withBootstrap()
12+
13+
// Add ColVis compatibility
14+
.withColVis()
15+
// Add a state change function
16+
.withColVisStateChange(function(iColumn, bVisible) {
17+
console.log('The column' + iColumn + ' has changed its status to ' + bVisible)
18+
})
19+
// Exclude the last column from the list
20+
.withColVisOption('aiExclude', [2])
21+
22+
// Add ColReorder compatibility
23+
.withColReorder()
24+
// Set order
25+
.withColReorderOrder([1, 0, 2])
26+
// Fix last right column
27+
.withColReorderOption('iFixedColumnsRight', 1)
28+
.withColReorderCallback(function() {
29+
console.log('Columns order has been changed with: ' + this.fnOrder());
30+
})
31+
32+
// Add Table tools compatibility
33+
.withTableTools('https://github.com/DataTables/TableTools/raw/master/swf/copy_csv_xls_pdf.swf')
34+
.withTableToolsButtons([
35+
'copy',
36+
'print', {
37+
'sExtends': 'collection',
38+
'sButtonText': 'Save',
39+
'aButtons': ['csv', 'xls', 'pdf']
40+
}
41+
]);
42+
$scope.dtColumns = [
43+
DTColumnBuilder.newColumn('id').withTitle('ID').withClass('text-danger'),
44+
DTColumnBuilder.newColumn('firstName').withTitle('First name'),
45+
DTColumnBuilder.newColumn('lastName').withTitle('Last name')
46+
];
47+
});
48+
})();

‎demo/angularWay.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/**
2+
* @author l.lin
3+
* @created 17/07/14 17:04
4+
*/
5+
(function() {
6+
'use strict';
7+
angular.module('datatablesSampleApp').controller('angularWayCtrl', function ($scope, $resource) {
8+
$scope.persons = $resource('data.json').query();
9+
});
10+
})();

‎demo/angularWayWithOptions.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
/**
2+
* @author l.lin
3+
* @created 17/07/14 17:04
4+
*/
5+
(function() {
6+
'use strict';
7+
angular.module('datatablesSampleApp').controller('angularWayWithOptionsCtrl', function ($scope, $resource, DTOptionsBuilder, DTColumnBuilder) {
8+
$scope.persons = $resource('data.json').query();
9+
$scope.dtOptions = DTOptionsBuilder.newOptions().withPaginationType('full_numbers').withDisplayLength(2);
10+
$scope.dtColumns = [
11+
DTColumnBuilder.newColumn('id').withTitle('ID'),
12+
DTColumnBuilder.newColumn('firstName').withTitle('First name'),
13+
DTColumnBuilder.newColumn('lastName').withTitle('Last name').notVisible()
14+
];
15+
});
16+
})();

‎demo/app.js

Lines changed: 14 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
(function(angular, backToTop) {
22
'use strict';
3-
angular.module('datatablesSampleApp', ['ngResource', 'datatables', 'ui.bootstrap.collapse', 'ui.bootstrap.tabs', 'ui.router']).
3+
angular.module('datatablesSampleApp', ['ngResource', 'datatables', 'ui.bootstrap', 'ui.router', 'hljs']).
44
controller('apiCtrl', function($scope, DTOptionsBuilder) {
55
$scope.dtOptions = DTOptionsBuilder.newOptions()
66
.withDisplayLength(10)
@@ -9,6 +9,12 @@
99
.withOption('bAutoWidth', false)
1010
.withTableTools('vendor/datatables-tabletools/swf/copy_csv_xls_pdf.swf');
1111
}).
12+
config(function (hljsServiceProvider) {
13+
hljsServiceProvider.setOptions({
14+
// replace tab with 4 spaces
15+
tabReplace: ' '
16+
});
17+
}).
1218
config(function($stateProvider, $urlRouterProvider) {
1319
$urlRouterProvider.otherwise('/gettingStarted');
1420
$stateProvider
@@ -44,6 +50,10 @@
4450
url: '/angularWay',
4551
templateUrl: 'demo/partials/angular_way.html'
4652
})
53+
.state('angularWayWithOptions', {
54+
url: '/angularWayWithOptions',
55+
templateUrl: 'demo/partials/angular_way_with_options.html'
56+
})
4757
.state('withColReorder', {
4858
url: '/withColReorder',
4959
templateUrl: 'demo/partials/with_col_reorder.html'
@@ -56,9 +66,9 @@
5666
url: '/withTableTools',
5767
templateUrl: 'demo/partials/with_table_tools.html'
5868
})
59-
.state('bootstrap', {
60-
url: '/bootstrap',
61-
templateUrl: 'demo/partials/bootstrap.html'
69+
.state('bootstrapIntegration', {
70+
url: '/bootstrapIntegration',
71+
templateUrl: 'demo/partials/bootstrap_integration.html'
6272
})
6373
.state('allInOne', {
6474
url: '/allInOne',
@@ -68,41 +78,6 @@
6878
url: '/api',
6979
templateUrl: 'demo/partials/api.html'
7080
});
71-
}).
72-
factory('sampleFactory', function($resource) {
73-
return {
74-
getData: function() {
75-
return $resource('data').query().$promise;
76-
},
77-
getData1: function() {
78-
return $resource('data1.json').query().$promise;
79-
}
80-
};
81-
}).
82-
controller('sampleCtrl', function($scope, DTOptionsBuilder, DTColumnBuilder, sampleFactory) {
83-
$scope.reload = function() {
84-
$scope.dtOptions.reloadData();
85-
// $scope.dtOptions.fnPromise = sampleFactory.getData();
86-
};
87-
$scope.changeData = function() {
88-
// $scope.dtOptions.sAjaxSource = 'data1.json';
89-
$scope.dtOptions.fnPromise = sampleFactory.getData1;
90-
};
91-
92-
$scope.persons = [];
93-
sampleFactory.getData().then(function(persons) {
94-
$scope.persons = persons;
95-
});
96-
97-
// $scope.dtOptions = DTOptionsBuilder.fromSource('data').withPaginationType('full_numbers');
98-
$scope.dtOptions = DTOptionsBuilder.fromFnPromise(sampleFactory.getData).withPaginationType('full_numbers');
99-
// $scope.dtOptions = DTOptionsBuilder.newOptions().withPaginationType('full_numbers');
100-
101-
$scope.dtColumns = [
102-
DTColumnBuilder.newColumn('id').withTitle('ID'),
103-
DTColumnBuilder.newColumn('firstName').withTitle('First name'),
104-
DTColumnBuilder.newColumn('lastName').withTitle('Last name').notVisible()
105-
];
10681
});
10782

10883
backToTop.init({

‎demo/bootstrapIntegration.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/**
2+
* @author l.lin
3+
* @created 17/07/14 17:04
4+
*/
5+
(function() {
6+
'use strict';
7+
angular.module('datatablesSampleApp').controller('bootstrapIntegrationCtrl', function ($scope, DTOptionsBuilder, DTColumnBuilder) {
8+
$scope.dtOptions = DTOptionsBuilder
9+
.fromSource('data.json')
10+
// Add Bootstrap compatibility
11+
.withBootstrap();
12+
$scope.dtColumns = [
13+
DTColumnBuilder.newColumn('id').withTitle('ID').withClass('text-danger'),
14+
DTColumnBuilder.newColumn('firstName').withTitle('First name'),
15+
DTColumnBuilder.newColumn('lastName').withTitle('Last name')
16+
];
17+
});
18+
})();

‎demo/dataReloadWithAjax.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
/**
2+
* @author l.lin
3+
* @created 17/07/14 16:56
4+
*/
5+
(function() {
6+
'use strict';
7+
angular.module('datatablesSampleApp').controller('dataReloadWithAjaxCtrl', function($scope, DTOptionsBuilder, DTColumnBuilder) {
8+
$scope.reloadData = function() {
9+
$scope.dtOptions.reloadData();
10+
};
11+
$scope.changeData = function() {
12+
$scope.dtOptions.sAjaxSource = 'data1.json';
13+
};
14+
15+
$scope.dtOptions = DTOptionsBuilder.fromSource('data.json').withPaginationType('full_numbers');
16+
17+
$scope.dtColumns = [
18+
DTColumnBuilder.newColumn('id').withTitle('ID'),
19+
DTColumnBuilder.newColumn('firstName').withTitle('First name'),
20+
DTColumnBuilder.newColumn('lastName').withTitle('Last name').notVisible()
21+
];
22+
});
23+
})();

‎demo/dataReloadWithPromise.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
/**
2+
* @author l.lin
3+
* @created 17/07/14 16:56
4+
*/
5+
(function() {
6+
'use strict';
7+
angular.module('datatablesSampleApp').controller('dataReloadWithPromiseCtrl', function($scope, DTOptionsBuilder, DTColumnBuilder, $resource) {
8+
$scope.reloadData = function() {
9+
$scope.dtOptions.reloadData();
10+
};
11+
$scope.changeData = function() {
12+
$scope.dtOptions.fnPromise = $resource('data1.json').query().$promise;
13+
};
14+
15+
$scope.dtOptions = DTOptionsBuilder.fromFnPromise(function() {
16+
return $resource('data.json').query().$promise;
17+
}).withPaginationType('full_numbers');
18+
19+
$scope.dtColumns = [
20+
DTColumnBuilder.newColumn('id').withTitle('ID'),
21+
DTColumnBuilder.newColumn('firstName').withTitle('First name'),
22+
DTColumnBuilder.newColumn('lastName').withTitle('Last name').notVisible()
23+
];
24+
});
25+
})();

‎demo/partials/all_in_one.html

Lines changed: 63 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,68 @@ <h1><i class="fa fa-play"></i>&nbsp;All in one</h1>
66
<p>
77
Example with everything in da box!
88
</p>
9-
<iframe style="width: 100%; height: 650px; border: 1px solid #e5e5e5;" src="http://embed.plnkr.co/Eh4n7TlW1l77obVxWFNT/preview"></iframe>
9+
</section>
10+
<section class="showcase">
11+
<tabset>
12+
<tab heading="Preview">
13+
<article class="preview">
14+
<div ng-controller="allInOneCtrl">
15+
<table datatable="" dt-options="dtOptions" dt-columns="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="allInOneCtrl">
22+
<table datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="table table-striped table-bordered"></table>
23+
</div>
24+
</div>
25+
</tab>
26+
<tab heading="JS">
27+
<div hljs language="js">
28+
angular.module('datatablesSampleApp', ['datatables']).controller('allInOneCtrl', function ($scope, DTOptionsBuilder, DTColumnBuilder) {
29+
$scope.dtOptions = DTOptionsBuilder
30+
.fromSource('data.json')
31+
// Add Bootstrap compatibility
32+
.withBootstrap()
33+
34+
// Add ColVis compatibility
35+
.withColVis()
36+
// Add a state change function
37+
.withColVisStateChange(function(iColumn, bVisible) {
38+
console.log('The column' + iColumn + ' has changed its status to ' + bVisible)
39+
})
40+
// Exclude the last column from the list
41+
.withColVisOption('aiExclude', [2])
42+
43+
// Add ColReorder compatibility
44+
.withColReorder()
45+
// Set order
46+
.withColReorderOrder([1, 0, 2])
47+
// Fix last right column
48+
.withColReorderOption('iFixedColumnsRight', 1)
49+
.withColReorderCallback(function() {
50+
console.log('Columns order has been changed with: ' + this.fnOrder());
51+
})
52+
53+
// Add Table tools compatibility
54+
.withTableTools('https://github.com/DataTables/TableTools/raw/master/swf/copy_csv_xls_pdf.swf')
55+
.withTableToolsButtons([
56+
'copy',
57+
'print', {
58+
'sExtends': 'collection',
59+
'sButtonText': 'Save',
60+
'aButtons': ['csv', 'xls', 'pdf']
61+
}
62+
]);
63+
$scope.dtColumns = [
64+
DTColumnBuilder.newColumn('id').withTitle('ID').withClass('text-danger'),
65+
DTColumnBuilder.newColumn('firstName').withTitle('First name'),
66+
DTColumnBuilder.newColumn('lastName').withTitle('Last name')
67+
];
68+
});
69+
</div>
70+
</tab>
71+
</tabset>
1072
</section>
1173
</article>

‎demo/partials/angular_way.html

Lines changed: 55 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -8,32 +8,60 @@ <h1><i class="fa fa-play"></i>&nbsp;The Angular way</h1>
88
All you need to do is to add the directive <code>datatable</code> and <code>dt-rows</code> on your table in order
99
to make it rendered with DataTables.
1010
</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>
11+
</section>
12+
<section class="showcase">
13+
<tabset>
14+
<tab heading="Preview">
15+
<article class="preview">
16+
<div ng-controller="angularWayCtrl">
17+
<table datatable="ng">
18+
<thead>
19+
<tr>
20+
<th>ID</th>
21+
<th>FirstName</th>
22+
<th>LastName</th>
23+
</tr>
24+
</thead>
25+
<tbody>
26+
<tr dt-rows ng-repeat="person in persons">
27+
<td>{{ person.id }}</td>
28+
<td>{{ person.firstName }}</td>
29+
<td>{{ person.lastName }}</td>
30+
</tr>
31+
</tbody>
32+
</table>
33+
</div>
34+
</article>
35+
</tab>
36+
<tab heading="HTML">
37+
<div hljs>
38+
<div ng-controller="angularWayCtrl">
39+
<table datatable="ng">
40+
<thead>
41+
<tr>
42+
<th>ID</th>
43+
<th>FirstName</th>
44+
<th>LastName</th>
45+
</tr>
46+
</thead>
47+
<tbody>
48+
<tr dt-rows ng-repeat="person in persons">
49+
<td>{{ person.id }}</td>
50+
<td>{{ person.firstName }}</td>
51+
<td>{{ person.lastName }}</td>
52+
</tr>
53+
</tbody>
54+
</table>
55+
</div>
56+
</div>
57+
</tab>
58+
<tab heading="JS">
59+
<div hljs language="js">
60+
angular.module('datatablesSampleApp', ['ngResource', 'datatables']).controller('angularWayCtrl', function ($scope, $resource) {
61+
$scope.persons = $resource('data.json').query();
62+
});
63+
</div>
64+
</tab>
65+
</tabset>
3866
</section>
3967
</article>

0 commit comments

Comments
 (0)