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

Commit ecbfe56

Browse files
l-linl-lin
committed
Add Buttons support #428 
1 parent 68e7920 commit ecbfe56

38 files changed

+4732
-321
lines changed

‎bower.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,9 @@
1414
"dist/plugins/fixedcolumns/angular-datatables.fixedcolumns.js",
1515
"dist/plugins/fixedheader/angular-datatables.fixedheader.js",
1616
"dist/plugins/scroller/angular-datatables.scroller.js",
17-
"dist/plugins/tabletools/angular-datatables.tabletools.js"
17+
"dist/plugins/tabletools/angular-datatables.tabletools.js",
18+
"dist/plugins/buttons/angular-datatables.buttons.js",
19+
"dist/plugins/select/angular-datatables.select.js"
1820
],
1921
"ignore": [
2022
".bowerrc",

‎demo/api/apiOptionsBuilder.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -499,6 +499,10 @@ <h3><code>DTOptionsBuilder</code></h3>
499499
<td><code>DTOptions</code></td>
500500
<td><code>withColVis()</code></td>
501501
<td>
502+
<p class="alert alert-danger">
503+
<i class="fa fa-warning"></i>&nbsp;This extension has been retired and has been replaced by the
504+
<a href="https://datatables.net/extensions/buttons/">Button extension</a>.
505+
</p>
502506
<p>Add <a href="https://datatables.net/extras/colvis/">ColVis</a> compatibility.</p>
503507
<div hljs language="js">
504508
angular.module('myModule', ['datatables', 'datatables.colvis']])
@@ -527,6 +531,10 @@ <h3><code>DTOptionsBuilder</code></h3>
527531
<td><code>DTOptions</code></td>
528532
<td><code>withColVisOption(key, value)</code></td>
529533
<td>
534+
<p class="alert alert-danger">
535+
<i class="fa fa-warning"></i>&nbsp;This extension has been retired and has been replaced by the
536+
<a href="https://datatables.net/extensions/buttons/">Button extension</a>.
537+
</p>
530538
<p>Add option to the attribute <code>oColVis</code>.</p>
531539
<div hljs language="js">
532540
angular.module('myModule', ['datatables', 'datatables.colvis']])
@@ -557,6 +565,10 @@ <h3><code>DTOptionsBuilder</code></h3>
557565
<td><code>DTOptions</code></td>
558566
<td><code>withColVisStateChange(fnStateChange)</code></td>
559567
<td>
568+
<p class="alert alert-danger">
569+
<i class="fa fa-warning"></i>&nbsp;This extension has been retired and has been replaced by the
570+
<a href="https://datatables.net/extensions/buttons/">Button extension</a>.
571+
</p>
560572
<p>Set the state change function.</p>
561573
<div hljs language="js">
562574
angular.module('myModule', ['datatables', 'datatables.colvis'])
@@ -806,6 +818,24 @@ <h3><code>DTOptionsBuilder</code></h3>
806818
bottom: true
807819
});
808820
}
821+
</div>
822+
</td>
823+
</tr>
824+
<tr>
825+
<td><code>DTOptions</code></td>
826+
<td><code>withButtons(buttonsOptions)</code></td>
827+
<td>
828+
<p>
829+
Add <a href="https://datatables.net/extensions/buttons/">Buttons</a> compatibility.
830+
</p>
831+
<div hljs language="js">
832+
angular.module('myModule', ['datatables', 'datatables.buttons'])
833+
.controller('MyCtrl', MyCtrl);
834+
function MyCtrl(DTOptionsBuilder) {
835+
var vm = this;
836+
vm.dtOptions = DTOptionsBuilder.newOptions()
837+
.withButtons(['colvis']);
838+
}
809839
</div>
810840
</td>
811841
</tr>

‎demo/app.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ angular.module('showcase', [
3131
'showcase.withTableTools',
3232
'showcase.withFixedColumns',
3333
'showcase.withFixedHeader',
34+
'showcase.withButtons',
3435
'showcase.dtInstances',
3536

3637
'showcase.usages',

‎demo/usages.js

Lines changed: 26 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -63,39 +63,30 @@ angular.module('showcase.usages', ['ngResource'])
6363
name: 'loadOptionsWithPromise',
6464
label: 'Load DT options with promise'
6565
}],
66-
withPlugins: [{
67-
name: 'withColReorder',
68-
label: 'With ColReorder'
69-
}, {
70-
name: 'withColVis',
71-
label: 'With ColVis [deprecated]'
72-
}, {
73-
name: 'withTableTools',
74-
label: 'With TableTools [deprecated]'
75-
}, {
76-
name: 'withResponsive',
77-
label: 'With Responsive'
66+
withPlugins: [ {
67+
name: 'withAngularTranslate',
68+
label: 'With Angular Translate'
7869
}, {
79-
name: 'withScroller',
80-
label: 'With Scroller'
70+
name: 'withAngularTranslateSwitchLanguage',
71+
label: 'Switch language with Angular Translate'
8172
}, {
82-
name: 'withColumnFilter',
83-
label: 'With Column Filter'
73+
name: 'withButtons',
74+
label: 'With Buttons'
8475
}, {
85-
name: 'withLightColumnFilter',
86-
label: 'With Light Column Filter'
87-
},{
8876
name: 'bootstrapIntegration',
8977
label: 'Bootstrap integration'
9078
}, {
9179
name: 'overrideBootstrapOptions',
9280
label: 'Override Bootstrap options'
9381
}, {
94-
name: 'withAngularTranslate',
95-
label: 'With Angular Translate'
82+
name: 'withColumnFilter',
83+
label: 'With Column Filter'
9684
}, {
97-
name: 'withAngularTranslateSwitchLanguage',
98-
label: 'Switch language with Angular Translate'
85+
name: 'withColReorder',
86+
label: 'With ColReorder'
87+
}, {
88+
name: 'withColVis',
89+
label: 'With ColVis [deprecated]'
9990
}, {
10091
name: 'withFixedColumns',
10192
label: 'With Fixed Columns'
@@ -108,5 +99,17 @@ angular.module('showcase.usages', ['ngResource'])
10899
var fixedFooterEle = document.getElementsByClassName('fixedFooter');
109100
angular.element(fixedFooterEle).remove();
110101
}
102+
}, {
103+
name: 'withLightColumnFilter',
104+
label: 'With Light Column Filter'
105+
}, {
106+
name: 'withResponsive',
107+
label: 'With Responsive'
108+
}, {
109+
name: 'withScroller',
110+
label: 'With Scroller'
111+
}, {
112+
name: 'withTableTools',
113+
label: 'With TableTools [deprecated]'
111114
}]
112115
});

‎demo/withPlugins/withButtons.html

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<article class="main-content">
2+
<header class="article-header">
3+
<h1>
4+
<i class="fa fa-play"></i>&nbsp;With the DataTables <a href="https://datatables.net/extensions/buttons/">Buttons</a>
5+
</h1>
6+
</header>
7+
<section class="article-content">
8+
<p>
9+
The <code>angular-datatables</code> also provides an API in order to make the plugin <code>Buttons</code> work with datatables.
10+
</p>
11+
<p>
12+
You need to add the file <code>angular-datatables.buttons.min.js</code> to your HTML file.
13+
</p>
14+
<p>
15+
You also need to add the dependency <code>datatables.buttons</code> to your Angular app.
16+
</p>
17+
<p>
18+
See the <a ui-sref="api">API</a> for the complete list of methods of the helper.
19+
</p>
20+
</section>
21+
<section class="showcase">
22+
<tabset>
23+
<tab heading="Preview">
24+
<article class="preview">
25+
<div ng-controller="WithButtonsCtrl as showCase">
26+
<table datatable dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" class="row-border hover"></table>
27+
</div>
28+
</article>
29+
</tab>
30+
<tab heading="HTML">
31+
<div hljs>
32+
<link rel="stylesheet" href="vendor/datatables-buttons/css/buttons.dataTables.css">
33+
<!-- ... -->
34+
<div ng-controller="WithButtonsCtrl as showCase">
35+
<table datatable dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" class="row-border hover"></table>
36+
</div>
37+
<!-- ... -->
38+
<script src="vendor/datatables-buttons/js/dataTables.buttons.js"></script>
39+
<script src="vendor/angular-datatables/dist/plugins/buttons/angular-datatables.buttons.min.js"></script>
40+
</div>
41+
</tab>
42+
<tab heading="JS">
43+
<div hljs language="js">
44+
angular.module('showcase.withButtons', ['datatables', 'datatables.buttons'])
45+
.controller('WithButtonsCtrl', WithButtonsCtrl);
46+
47+
function WithButtonsCtrl(DTOptionsBuilder, DTColumnBuilder) {
48+
var vm = this;
49+
vm.dtOptions = DTOptionsBuilder.fromSource('data.json')
50+
.withDOM('frtip')
51+
.withPaginationType('full_numbers')
52+
// Active Buttons extension
53+
.withButtons([
54+
'columnsToggle',
55+
'colvis',
56+
'copy',
57+
'print',
58+
'excel',
59+
{
60+
text: 'Some button',
61+
key: '1',
62+
action: function (e, dt, node, config) {
63+
alert('Button activated');
64+
}
65+
}
66+
]);
67+
vm.dtColumns = [
68+
DTColumnBuilder.newColumn('id').withTitle('ID'),
69+
DTColumnBuilder.newColumn('firstName').withTitle('First name'),
70+
DTColumnBuilder.newColumn('lastName').withTitle('Last name')
71+
];
72+
}
73+
74+
</div>
75+
</tab>
76+
</tabset>
77+
</section>
78+
</article>

‎demo/withPlugins/withButtons.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
'use strict';
2+
angular.module('showcase.withButtons', ['datatables', 'datatables.buttons'])
3+
.controller('WithButtonsCtrl', WithButtonsCtrl);
4+
5+
function WithButtonsCtrl(DTOptionsBuilder, DTColumnBuilder) {
6+
var vm = this;
7+
vm.dtOptions = DTOptionsBuilder.fromSource('data.json')
8+
.withDOM('frtip')
9+
.withPaginationType('full_numbers')
10+
// Active Buttons extension
11+
.withButtons([
12+
'columnsToggle',
13+
'colvis',
14+
'copy',
15+
'print',
16+
'excel',
17+
{
18+
text: 'Some button',
19+
key: '1',
20+
action: function (e, dt, node, config) {
21+
alert('Button activated');
22+
}
23+
}
24+
]);
25+
vm.dtColumns = [
26+
DTColumnBuilder.newColumn('id').withTitle('ID'),
27+
DTColumnBuilder.newColumn('firstName').withTitle('First name'),
28+
DTColumnBuilder.newColumn('lastName').withTitle('Last name')
29+
];
30+
}

‎dist/plugins/buttons/angular-datatables.buttons.js

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
/*!
2+
* angular-datatables - v0.5.1
3+
* https://github.com/l-lin/angular-datatables
4+
* License: MIT
5+
*/
6+
(function (window, document, $, angular) {
7+
8+
'use strict';
9+
10+
// See https://datatables.net/extensions/fixedheader/
11+
angular.module('datatables.fixedheader', ['datatables'])
12+
.config(dtFixedHeaderConfig)
13+
.run(initFixedHeaderPlugin);
14+
15+
/* @ngInject */
16+
function dtFixedHeaderConfig($provide) {
17+
$provide.decorator('DTOptionsBuilder', dtOptionsBuilderDecorator);
18+
19+
function dtOptionsBuilderDecorator($delegate) {
20+
var newOptions = $delegate.newOptions;
21+
var fromSource = $delegate.fromSource;
22+
var fromFnPromise = $delegate.fromFnPromise;
23+
24+
$delegate.newOptions = function() {
25+
return _decorateOptions(newOptions);
26+
};
27+
$delegate.fromSource = function(ajax) {
28+
return _decorateOptions(fromSource, ajax);
29+
};
30+
$delegate.fromFnPromise = function(fnPromise) {
31+
return _decorateOptions(fromFnPromise, fnPromise);
32+
};
33+
34+
return $delegate;
35+
36+
function _decorateOptions(fn, params) {
37+
var options = fn(params);
38+
options.withFixedHeader = withFixedHeader;
39+
return options;
40+
41+
/**
42+
* Add fixed header support
43+
* @param fixedHeaderOptions the plugin options
44+
* @returns {DTOptions} the options
45+
*/
46+
function withFixedHeader(fixedHeaderOptions) {
47+
options.hasFixedHeader = true;
48+
if (fixedHeaderOptions) {
49+
options.fixedHeaderOptions = fixedHeaderOptions;
50+
}
51+
return options;
52+
}
53+
}
54+
}
55+
dtOptionsBuilderDecorator.$inject = ['$delegate'];
56+
}
57+
dtFixedHeaderConfig.$inject = ['$provide'];
58+
59+
/* @ngInject */
60+
function initFixedHeaderPlugin(DTRendererService) {
61+
var fixedHeaderPlugin = {
62+
postRender: postRender
63+
};
64+
DTRendererService.registerPlugin(fixedHeaderPlugin);
65+
66+
function postRender(options, result) {
67+
if (options && options.hasFixedHeader) {
68+
new $.fn.dataTable.FixedHeader(result.DataTable, options.fixedHeaderOptions);
69+
}
70+
}
71+
}
72+
initFixedHeaderPlugin.$inject = ['DTRendererService'];
73+
74+
75+
})(window, document, jQuery, angular);

‎dist/plugins/buttons/angular-datatables.buttons.min.js

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎grunt/concat.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@ module.exports = {
1818
'<%= yeoman.build %>/plugins/scroller/angular-datatables.scroller.js': ['<%= yeoman.src %>/plugins/scroller/*.js'],
1919
'<%= yeoman.build %>/plugins/tabletools/angular-datatables.tabletools.js': ['<%= yeoman.src %>/plugins/tabletools/*.js'],
2020
'<%= yeoman.build %>/plugins/fixedcolumns/angular-datatables.fixedcolumns.js': ['<%= yeoman.src %>/plugins/fixedcolumns/*.js'],
21-
'<%= yeoman.build %>/plugins/fixedheader/angular-datatables.fixedheader.js': ['<%= yeoman.src %>/plugins/fixedheader/*.js']
21+
'<%= yeoman.build %>/plugins/fixedheader/angular-datatables.fixedheader.js': ['<%= yeoman.src %>/plugins/fixedheader/*.js'],
22+
'<%= yeoman.build %>/plugins/buttons/angular-datatables.buttons.js': ['<%= yeoman.src %>/plugins/fixedheader/*.js']
2223
}
2324
},
2425
// Copy the source files with the banner in dist folder
@@ -33,7 +34,8 @@ module.exports = {
3334
'<%= yeoman.dist %>/plugins/scroller/angular-datatables.scroller.js': ['<%= yeoman.build %>/plugins/scroller/angular-datatables.scroller.js'],
3435
'<%= yeoman.dist %>/plugins/tabletools/angular-datatables.tabletools.js': ['<%= yeoman.build %>/plugins/tabletools/angular-datatables.tabletools.js'],
3536
'<%= yeoman.dist %>/plugins/fixedcolumns/angular-datatables.fixedcolumns.js': ['<%= yeoman.build %>/plugins/fixedcolumns/angular-datatables.fixedcolumns.js'],
36-
'<%= yeoman.dist %>/plugins/fixedheader/angular-datatables.fixedheader.js': ['<%= yeoman.build %>/plugins/fixedheader/angular-datatables.fixedheader.js']
37+
'<%= yeoman.dist %>/plugins/fixedheader/angular-datatables.fixedheader.js': ['<%= yeoman.build %>/plugins/fixedheader/angular-datatables.fixedheader.js'],
38+
'<%= yeoman.dist %>/plugins/buttons/angular-datatables.buttons.js': ['<%= yeoman.build %>/plugins/fixedheader/angular-datatables.fixedheader.js']
3739
}
3840
},
3941
bannerCSS: {

‎grunt/ngAnnotate.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@ module.exports = {
1414
'<%= yeoman.build %>/plugins/scroller/angular-datatables.scroller.js': ['<%= yeoman.build %>/plugins/scroller/angular-datatables.scroller.js'],
1515
'<%= yeoman.build %>/plugins/tabletools/angular-datatables.tabletools.js': ['<%= yeoman.build %>/plugins/tabletools/angular-datatables.tabletools.js'],
1616
'<%= yeoman.build %>/plugins/fixedcolumns/angular-datatables.fixedcolumns.js': ['<%= yeoman.build %>/plugins/fixedcolumns/angular-datatables.fixedcolumns.js'],
17-
'<%= yeoman.build %>/plugins/fixedheader/angular-datatables.fixedheader.js': ['<%= yeoman.build %>/plugins/fixedheader/angular-datatables.fixedheader.js']
17+
'<%= yeoman.build %>/plugins/fixedheader/angular-datatables.fixedheader.js': ['<%= yeoman.build %>/plugins/fixedheader/angular-datatables.fixedheader.js'],
18+
'<%= yeoman.build %>/plugins/buttons/angular-datatables.buttons.js': ['<%= yeoman.build %>/plugins/fixedheader/angular-datatables.fixedheader.js']
1819
}
1920
}
2021
};

0 commit comments

Comments
 (0)