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

Commit 1cc617f

Browse files
l-linl-lin
committed
doc: Add multiple tables example
1 parent e3ff1f0 commit 1cc617f

9 files changed

+7077
-3
lines changed

‎demo/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444
"zone.js": "^0.8.18"
4545
},
4646
"devDependencies": {
47-
"@angular/cli": "1.5.3",
47+
"@angular/cli": "^1.6.0",
4848
"@angular/compiler-cli": "^5.0.0",
4949
"@angular/language-service": "^5.0.0",
5050
"@types/datatables.net": "^1.10.6",

‎demo/src/app/advanced/multiple-tables-snippet.component.ts

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-multiple-tables-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 MultipleTablesSnippetComponent {
17+
htmlSnippet = `
18+
<pre>
19+
<code class="xml highlight">&lt;p&gt;
20+
&lt;button type="button" class="btn waves-effect waves-light blue" (click)="displayToConsole()"&gt;
21+
Display the DataTable instances in the console
22+
&lt;/button&gt;
23+
&lt;/p&gt;
24+
&lt;table id="first-table" datatable [dtOptions]="dtOptions[0]" class="row-border hover"&gt;&lt;/table&gt;
25+
&lt;table id="second-table" datatable [dtOptions]="dtOptions[1]" class="row-border hover"&gt;&lt;/table&gt;</code>
26+
</pre>
27+
`;
28+
29+
tsSnippet = `
30+
<pre>
31+
<code class="typescript highlight">import { Component, OnInit, QueryList, ViewChildren } from '@angular/core';
32+
33+
import { DataTableDirective } from 'angular-datatables';
34+
35+
@Component({
36+
selector: 'app-multiple-tables',
37+
templateUrl: 'multiple-tables.component.html'
38+
})
39+
export class MultipleTablesComponent implements OnInit {
40+
@ViewChildren(DataTableDirective)
41+
dtElements: QueryList<DataTableDirective>;
42+
43+
dtOptions: DataTables.Settings[] = [];
44+
45+
displayToConsole(): void {
46+
this.dtElements.forEach((dtElement: DataTableDirective, index: number) => {
47+
dtElement.dtInstance.then((dtInstance: any) => {
48+
console.log(\`The DataTable \${index} instance ID is: \${dtInstance.table().node().id}\`);
49+
});
50+
});
51+
}
52+
53+
ngOnInit(): void {
54+
this.dtOptions[0] = this.buildDtOptions('data/data.json');
55+
this.dtOptions[1] = this.buildDtOptions('data/data1.json');
56+
}
57+
58+
private buildDtOptions(url: string): DataTables.Settings {
59+
return {
60+
ajax: url,
61+
columns: [{
62+
title: 'ID',
63+
data: 'id'
64+
}, {
65+
title: 'First name',
66+
data: 'firstName'
67+
}, {
68+
title: 'Last name',
69+
data: 'lastName'
70+
}]
71+
};
72+
}
73+
}
74+
</code>
75+
</pre>
76+
`;
77+
}

‎demo/src/app/advanced/multiple-tables.component.html

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
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">Multiple DataTables in the same page</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+
<p class="caption">
15+
You can display multiple datatables in the same page.
16+
</p>
17+
<div class="col s12 m9 l12 showcase-tabs">
18+
<ul class="anchor-links">
19+
<li class="col s4"><a class="waves-effect btn" href="#preview">Preview</a></li>
20+
<li class="col s4"><a class="waves-effect btn" href="#html">HTML</a></li>
21+
<li class="col s3"><a class="waves-effect btn" href="#ts">Typescript</a></li>
22+
</ul>
23+
</div>
24+
<div id="preview" class="col s12 m9 l12">
25+
<h4 class="header">Preview</h4>
26+
<p>
27+
<button type="button" class="btn waves-effect waves-light blue" (click)="displayToConsole()">
28+
Display the DataTable instances in the console
29+
</button>
30+
</p>
31+
<table id="first-table" datatable [dtOptions]="dtOptions[0]" class="row-border hover"></table>
32+
<table id="second-table" datatable [dtOptions]="dtOptions[1]" class="row-border hover"></table>
33+
</div>
34+
<app-multiple-tables-snippet></app-multiple-tables-snippet>
35+
</div>
36+
</div>
37+
</div>
38+
</div>

‎demo/src/app/advanced/multiple-tables.component.ts

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { Component, OnInit, QueryList, ViewChildren } from '@angular/core';
2+
3+
import { DataTableDirective } from 'angular-datatables';
4+
5+
@Component({
6+
selector: 'app-multiple-tables',
7+
templateUrl: 'multiple-tables.component.html'
8+
})
9+
export class MultipleTablesComponent implements OnInit {
10+
@ViewChildren(DataTableDirective)
11+
dtElements: QueryList<DataTableDirective>;
12+
13+
dtOptions: DataTables.Settings[] = [];
14+
15+
displayToConsole(): void {
16+
this.dtElements.forEach((dtElement: DataTableDirective, index: number) => {
17+
dtElement.dtInstance.then((dtInstance: any) => {
18+
console.log(`The DataTable ${index} instance ID is: ${dtInstance.table().node().id}`);
19+
});
20+
});
21+
}
22+
23+
ngOnInit(): void {
24+
this.dtOptions[0] = this.buildDtOptions('data/data.json');
25+
this.dtOptions[1] = this.buildDtOptions('data/data1.json');
26+
}
27+
28+
private buildDtOptions(url: string): DataTables.Settings {
29+
return {
30+
ajax: url,
31+
columns: [{
32+
title: 'ID',
33+
data: 'id'
34+
}, {
35+
title: 'First name',
36+
data: 'firstName'
37+
}, {
38+
title: 'Last name',
39+
data: 'lastName'
40+
}]
41+
};
42+
}
43+
}

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,9 @@ <h3>
8383
<li>
8484
<a routerLink="/advanced/row-click-event">Row click event</a>
8585
</li>
86+
<li>
87+
<a routerLink="/advanced/multiple-tables">Multiple tables</a>
88+
</li>
8689
</ul>
8790
</div>
8891
</li>
@@ -125,4 +128,4 @@ <h3>
125128
</p>
126129
</div>
127130
</div>
128-
</footer>
131+
</footer>

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,8 @@ import { RerenderComponent } from './advanced/rerender.component';
3939
import { RerenderSnippetComponent } from './advanced/rerender-snippet.component';
4040
import { RowClickEventComponent } from './advanced/row-click-event.component';
4141
import { RowClickEventSnippetComponent } from './advanced/row-click-event-snippet.component';
42+
import { MultipleTablesComponent } from './advanced/multiple-tables.component';
43+
import { MultipleTablesSnippetComponent } from './advanced/multiple-tables-snippet.component';
4244

4345
// Using extension examples
4446
import { ButtonsExtensionComponent } from './extensions/buttons-extension.component';
@@ -83,6 +85,8 @@ import { SelectExtensionConfigurationComponent } from './extensions/select-exten
8385
RerenderSnippetComponent,
8486
RowClickEventComponent,
8587
RowClickEventSnippetComponent,
88+
MultipleTablesComponent,
89+
MultipleTablesSnippetComponent,
8690

8791
ButtonsExtensionComponent,
8892
ButtonsExtensionSnippetComponent,

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import { IndividualColumnFilteringComponent } from './advanced/individual-column
1616
import { LoadDtOptionsWithPromiseComponent } from './advanced/load-dt-options-with-promise.component';
1717
import { RerenderComponent } from './advanced/rerender.component';
1818
import { RowClickEventComponent } from './advanced/row-click-event.component';
19+
import { MultipleTablesComponent } from './advanced/multiple-tables.component';
1920

2021
import { ButtonsExtensionComponent } from './extensions/buttons-extension.component';
2122
import { ColreorderExtensionComponent } from './extensions/colreorder-extension.component';
@@ -80,6 +81,10 @@ const routes: Routes = [
8081
path: 'advanced/row-click-event',
8182
component: RowClickEventComponent
8283
},
84+
{
85+
path: 'advanced/multiple-tables',
86+
component: MultipleTablesComponent
87+
},
8388
{
8489
path: 'extensions/buttons',
8590
component: ButtonsExtensionComponent

‎demo/src/app/getting-started.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { Component } from '@angular/core';
77
export class GettingStartedComponent {
88
nodeVersion = '8.0.0';
99
npmVersion = '5';
10-
angularCliVersion = '1.5.3';
10+
angularCliVersion = '1.6.6';
1111
npmInstallSnippet = `
1212
<pre>
1313
<code class="bash highlight">npm install jquery --save

0 commit comments

Comments
 (0)