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

Commit 2de2c6e

Browse files
l-linl-lin
committed
Add buttons extension example
1 parent 71eff84 commit 2de2c6e

12 files changed

+251
-25
lines changed

‎DEVELOPER.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,3 +71,15 @@ Karma is occasionally confused and it is often necessary to shut down its browse
7171
restart it. No worries; it's pretty quick.
7272

7373
The `HTML-Reporter` is also wired in. That produces a prettier output; look for it in `~_test-output/tests.html`.
74+
75+
## Deploying the documentation to Github Pages
76+
77+
Run `deploy-doc.sh` to deploy the documentation to the Github Pages
78+
79+
You may need to have the following:
80+
- git
81+
- have the basic commands in your OS
82+
83+
```
84+
./deploy-doc.sh <version>
85+
```

‎demo/.angular-cli.json

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,19 @@
2222
"prefix": "app",
2323
"styles": [
2424
"../node_modules/datatables.net-dt/css/jquery.dataTables.css",
25+
"../node_modules/datatables.net-buttons-dt/css/buttons.dataTables.css",
2526
"../node_modules/materialize-css/dist/css/materialize.css",
2627
"styles.css"
2728
],
2829
"scripts": [
2930
"../node_modules/jquery/dist/jquery.js",
3031
"../node_modules/tether/dist/js/tether.js",
31-
"../node_modules/datatables.net/js/jquery.dataTables.js"
32+
"../node_modules/datatables.net/js/jquery.dataTables.js",
33+
"../node_modules/datatables.net-buttons/js/dataTables.buttons.js",
34+
"../node_modules/datatables.net-buttons/js/buttons.colVis.js",
35+
"../node_modules/datatables.net-buttons/js/buttons.flash.js",
36+
"../node_modules/datatables.net-buttons/js/buttons.html5.js",
37+
"../node_modules/datatables.net-buttons/js/buttons.print.js"
3238
],
3339
"environmentSource": "environments/environment.ts",
3440
"environments": {

‎demo/README.md

Lines changed: 3 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,13 @@
11
# angular-datatables demo
22

3-
This project was generated with [angular-cli](https://github.com/angular/angular-cli) version 1.0.0-beta.21.
3+
This project was generated with [angular-cli](https://github.com/angular/angular-cli).
44

55
## Development server
6-
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
6+
Run `npm start` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
77

88
## Build
99

10-
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
11-
12-
## Deploying to Github Pages
13-
14-
Run `deploy-doc.sh` to deploy the documentation to the Github Pages
15-
16-
You may need to have the following:
17-
- git
18-
- angular-cli installed in global
19-
- have the basic commands in your OS
20-
21-
```
22-
./deploy-doc.sh "My commit message"
23-
```
10+
Run `npm run build:prod` to build the project. The build artifacts will be stored in the `dist/` directory.
2411

2512
## Further help
2613

‎demo/package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@
2525
"angular2-highlight-js": "5.0.0",
2626
"core-js": "2.4.1",
2727
"datatables.net": "1.10.13",
28+
"datatables.net-buttons": "2.2.0",
29+
"datatables.net-buttons-dt": "1.3.1",
2830
"datatables.net-dt": "1.10.13",
2931
"datatables.net-responsive": "2.1.1",
3032
"datatables.net-scroller": "1.4.2",
@@ -40,6 +42,7 @@
4042
"@angular/cli": "1.0.0",
4143
"@angular/compiler-cli": "4.0.3",
4244
"@types/datatables.net": "~1.10.1",
45+
"@types/datatables.net-buttons": "~1.1.2",
4346
"@types/jasmine": "2.5.38",
4447
"@types/jquery": "^2.0.41",
4548
"@types/node": "~6.0.70",

‎demo/src/app/app.component.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,13 @@ <h3>
5555
</ul>
5656
</div>
5757
</li>
58+
<li class="bold"><a class="collapsible-header waves-effect waves-teal">Using DT extensions</a>
59+
<div class="collapsible-body">
60+
<ul>
61+
<li><a routerLink="/extensions/buttons-extension">Buttons extension</a></li>
62+
</ul>
63+
</div>
64+
</li>
5865
</ul>
5966
</li>
6067
</ul>

‎demo/src/app/app.module.ts

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,11 @@ import { RerenderSnippetComponent } from './advanced/rerender-snippet.component'
3333
import { RowClickEventComponent } from './advanced/row-click-event.component';
3434
import { RowClickEventSnippetComponent } from './advanced/row-click-event-snippet.component';
3535

36+
// Using extension examples
37+
import { ButtonsExtensionComponent } from './extensions/buttons-extension.component';
38+
import { ButtonsExtensionSnippetComponent } from './extensions/buttons-extension-snippet.component';
39+
import { ButtonsExtensionConfigurationComponent } from './extensions/buttons-extension-configuration.component';
40+
3641
@NgModule({
3742
declarations: [
3843
AppComponent,
@@ -55,7 +60,11 @@ import { RowClickEventSnippetComponent } from './advanced/row-click-event-snippe
5560
RerenderComponent,
5661
RerenderSnippetComponent,
5762
RowClickEventComponent,
58-
RowClickEventSnippetComponent
63+
RowClickEventSnippetComponent,
64+
65+
ButtonsExtensionComponent,
66+
ButtonsExtensionSnippetComponent,
67+
ButtonsExtensionConfigurationComponent
5968
],
6069
imports: [
6170
BrowserModule,

‎demo/src/app/app.routing.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ import { LoadDtOptionsWithPromiseComponent } from './advanced/load-dt-options-wi
1414
import { RerenderComponent } from './advanced/rerender.component';
1515
import { RowClickEventComponent } from './advanced/row-click-event.component';
1616

17+
import { ButtonsExtensionComponent } from './extensions/buttons-extension.component';
18+
1719
const routes: Routes = [
1820
{
1921
path: '',
@@ -59,6 +61,10 @@ const routes: Routes = [
5961
{
6062
path: 'advanced/row-click-event',
6163
component: RowClickEventComponent
64+
},
65+
{
66+
path: 'extensions/buttons-extension',
67+
component: ButtonsExtensionComponent
6268
}
6369
];
6470

‎demo/src/app/extensions/buttons-extension-configuration.component.ts

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-buttons-extension-configuration',
5+
template: `
6+
<p class="caption">
7+
You can use the <a href="https://datatables.net/extensions/buttons/">Buttons extension</a> with angular-datatables.
8+
</p>
9+
<div class="col s12">
10+
<h4>NPM</h4>
11+
<p>You need to install its dependencies:</p>
12+
<section [innerHTML]="npmInstallSnippet" highlight-js-content=".bash"></section>
13+
</div>
14+
<div class="col s12">
15+
<h4 id="angular-cli">.angular-cli.json</h4>
16+
<p>Add the dependencies in the scripts and styles attributes:</p>
17+
<section [innerHTML]="angularCliJsonSnippet" highlight-js-content=".json"></section>
18+
</div>
19+
`
20+
})
21+
export class ButtonsExtensionConfigurationComponent {
22+
npmInstallSnippet = `
23+
<pre>
24+
<code class="bash highlight"># JS file
25+
npm install datatables.net-buttons --save
26+
# CSS file
27+
npm install datatables.net-buttons-dt --save
28+
</pre>`;
29+
30+
angularCliJsonSnippet = `
31+
<pre>
32+
<code class="json highlight">{
33+
"apps": [
34+
{
35+
...
36+
"styles": [
37+
...
38+
"../node_modules/datatables.net-buttons-dt/css/buttons.dataTables.css",
39+
],
40+
"scripts": [
41+
...
42+
"../node_modules/datatables.net-buttons/js/dataTables.buttons.js",
43+
"../node_modules/datatables.net-buttons/js/buttons.colVis.js",
44+
"../node_modules/datatables.net-buttons/js/buttons.flash.js",
45+
"../node_modules/datatables.net-buttons/js/buttons.html5.js",
46+
"../node_modules/datatables.net-buttons/js/buttons.print.js"
47+
],
48+
...
49+
}
50+
]
51+
}</code>
52+
</pre>
53+
`;
54+
}

‎demo/src/app/extensions/buttons-extension-snippet.component.ts

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-buttons-extension-snippet',
5+
template: `
6+
<div id="html" class="col s12 m9 l12">
7+
<h4 class="header">HTML</h4>
8+
<section [innerHTML]="htmlSnippet" highlight-js-content=".xml"></section>
9+
</div>
10+
<div id="ts" class="col s12 m9 l12">
11+
<h4 class="header">Typescript</h4>
12+
<section [innerHTML]="tsSnippet" highlight-js-content=".typescript"></section>
13+
</div>
14+
`
15+
})
16+
export class ButtonsExtensionSnippetComponent {
17+
htmlSnippet = `
18+
<pre>
19+
<code class="xml highlight">&lt;table datatable [dtOptions]="dtOptions" class="row-border hover"&gt;&lt;/table&gt;</code>
20+
</pre>
21+
`;
22+
23+
tsSnippet = `
24+
<pre>
25+
<code class="typescript highlight">import { Component, OnInit } from '@angular/core';
26+
27+
@Component({
28+
selector: 'app-buttons-extension',
29+
templateUrl: 'buttons-extension.component.html'
30+
})
31+
export class ButtonsExtensionComponent implements OnInit {
32+
// Must be declared as "any", not as "DataTables.Settings"
33+
dtOptions: any = {};
34+
35+
ngOnInit(): void {
36+
this.dtOptions = {
37+
ajax: 'data/data.json',
38+
columns: [{
39+
title: 'ID',
40+
data: 'id'
41+
}, {
42+
title: 'First name',
43+
data: 'firstName'
44+
}, {
45+
title: 'Last name',
46+
data: 'lastName'
47+
}],
48+
// Declare the use of the extension in the dom parameter
49+
dom: 'Bfrtip',
50+
// Configure the buttons
51+
buttons: [
52+
'columnsToggle',
53+
'colvis',
54+
'copy',
55+
'print',
56+
'excel',
57+
{
58+
text: 'Some button',
59+
key: '1',
60+
action: function (e, dt, node, config) {
61+
alert('Button activated');
62+
}
63+
}
64+
]
65+
};
66+
}
67+
}</code>
68+
</pre>
69+
`;
70+
}

‎demo/src/app/extensions/buttons-extension.component.html

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<div class="section banner">
2+
<div class="container">
3+
<div class="row">
4+
<div class="col s12 m9">
5+
<h1 class="header center-on-small-only">DataTables Buttons extension</h1>
6+
</div>
7+
</div>
8+
</div>
9+
</div>
10+
<div class="container">
11+
<div class="row">
12+
<div class="col s12 m9 l12">
13+
<div class="section">
14+
<app-buttons-extension-configuration></app-buttons-extension-configuration>
15+
<div class="col s12 m9 l12 showcase-tabs">
16+
<ul class="anchor-links">
17+
<li class="col s4"><a class="waves-effect btn" href="#preview">Preview</a></li>
18+
<li class="col s4"><a class="waves-effect btn" href="#html">HTML</a></li>
19+
<li class="col s3"><a class="waves-effect btn" href="#ts">Typescript</a></li>
20+
</ul>
21+
</div>
22+
<div id="preview" class="col s12 m9 l12">
23+
<h4 class="header">Preview</h4>
24+
<table datatable [dtOptions]="dtOptions" class="row-border hover"></table>
25+
</div>
26+
<app-buttons-extension-snippet></app-buttons-extension-snippet>
27+
</div>
28+
29+
</div>
30+
</div>
31+
</div>

‎demo/src/app/extensions/buttons-extension.component.ts

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { Component, OnInit } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-buttons-extension',
5+
templateUrl: 'buttons-extension.component.html'
6+
})
7+
export class ButtonsExtensionComponent implements OnInit {
8+
// Must be declared as "any", not as "DataTables.Settings"
9+
dtOptions: any = {};
10+
11+
ngOnInit(): void {
12+
this.dtOptions = {
13+
ajax: 'data/data.json',
14+
columns: [{
15+
title: 'ID',
16+
data: 'id'
17+
}, {
18+
title: 'First name',
19+
data: 'firstName'
20+
}, {
21+
title: 'Last name',
22+
data: 'lastName'
23+
}],
24+
// Declare the use of the extension in the dom parameter
25+
dom: 'Bfrtip',
26+
// Configure the buttons
27+
buttons: [
28+
'columnsToggle',
29+
'colvis',
30+
'copy',
31+
'print',
32+
'excel',
33+
{
34+
text: 'Some button',
35+
key: '1',
36+
action: function (e, dt, node, config) {
37+
alert('Button activated');
38+
}
39+
}
40+
]
41+
};
42+
}
43+
}

‎deploy-doc.sh

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,17 @@ function info {
88
}
99

1010
function help {
11-
echo "[x] Missing arguments..."
12-
info "Usage: $ deploy-doc.sh <version>"
11+
info "Usage: $ deploy-doc.sh <commit message>"
1312
info "Example:"
14-
info " $ deploy-doc.sh 2.0.0"
13+
info " $ deploy-doc.sh \"Deploy documentation to gh-pages\""
1514
}
1615

17-
if [ -z "$1" ]; then
16+
if [ "$1" == "-h" ] ; then
1817
help
19-
exit 1
18+
exit 0
2019
fi
2120

22-
version=${1}
23-
gitmessage="Deploy documentation $version to gh-pages"
21+
gitmessage="${1:-Deploy documentation to gh-pages}"
2422
cwd=$(pwd)
2523
project_name=${PWD##*/}
2624

0 commit comments

Comments
 (0)