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

Commit a4070bf

Browse files
l-linl-lin
committed
Add example to load DT options with promise #980 
1 parent 532a662 commit a4070bf

7 files changed

+171
-0
lines changed

‎demo/src/app/advanced/load-dt-options-with-promise-snippet.component.ts

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'load-dt-options-with-promise-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+
<div id="data" class="col s12 m9 l12">
15+
<h4 class="header">Example data</h4>
16+
<section [innerHTML]="dataSnippet" highlight-js-content=".json"></section>
17+
</div>
18+
`
19+
})
20+
export class LoadDtOptionsWithPromiseSnippetComponent {
21+
htmlSnippet = `
22+
<pre>
23+
<code class="xml highlight">&lt;table datatable [dtOptions]="dtOptions" class="row-border hover"&gt;&lt;/table&gt;</code>
24+
</pre>
25+
`;
26+
27+
tsSnippet = `
28+
<pre>
29+
<code class="typescript highlight">import { Component, Inject, OnInit } from '@angular/core';
30+
import { Http } from '@angular/http';
31+
32+
import 'rxjs/add/operator/toPromise';
33+
34+
@Component({
35+
selector: 'load-dt-options-with-promise',
36+
templateUrl: 'load-dt-options-with-promise.component.html'
37+
})
38+
export class LoadDtOptionsWithPromiseComponent implements OnInit {
39+
dtOptions: any = {};
40+
41+
constructor(@Inject(Http) private http: Http) {}
42+
43+
ngOnInit(): void {
44+
this.dtOptions = this.http.get('data/dtOptions.json')
45+
.toPromise()
46+
.then(response => response.json())
47+
.catch(this.handleError);
48+
}
49+
50+
private handleError(error: any): Promise<any> {
51+
console.error('An error occurred', error); // for demo purposes only
52+
return Promise.reject(error.message || error);
53+
}
54+
}
55+
</code>
56+
</pre>
57+
`;
58+
59+
dataSnippet = `
60+
<pre>
61+
<code class="json highlight">{
62+
"ajax": "data/data.json",
63+
"displayLength": 2,
64+
"paginationType": "full_numbers",
65+
"columns": [
66+
{
67+
"data": "id",
68+
"title": "ID"
69+
},
70+
{
71+
"data": "firstName",
72+
"title": "First name"
73+
},
74+
{
75+
"data": "lastName",
76+
"title": "Last name",
77+
"visible": false
78+
}
79+
]
80+
}</code>
81+
</pre>
82+
}

‎demo/src/app/advanced/load-dt-options-with-promise.component.html

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
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">Load DataTables options with promise</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+
Sometimes, your DataTable options are stored or computed server side. All you need to do is to return the expected result as a promise.
16+
</p>
17+
<div class="col s12 m9 l12 showcase-tabs">
18+
<ul class="anchor-links">
19+
<li class="col s3"><a class="waves-effect btn" simplePageScroll href="#preview">Preview</a></li>
20+
<li class="col s3"><a class="waves-effect btn" simplePageScroll href="#html">HTML</a></li>
21+
<li class="col s3"><a class="waves-effect btn" simplePageScroll href="#ts">Typescript</a></li>
22+
<li class="col s2"><a class="waves-effect btn" simplePageScroll href="#data">Example data</a></li>
23+
</ul>
24+
</div>
25+
<div id="preview" class="col s12 m9 l12">
26+
<h4 class="header">Preview</h4>
27+
<table datatable [dtOptions]="dtOptions" class="row-border hover"></table>
28+
</div>
29+
<load-dt-options-with-promise-snippet></load-dt-options-with-promise-snippet>
30+
</div>
31+
</div>
32+
</div>
33+
</div>

‎demo/src/app/advanced/load-dt-options-with-promise.component.ts

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { Component, Inject, OnInit } from '@angular/core';
2+
import { Http } from '@angular/http';
3+
4+
import 'rxjs/add/operator/toPromise';
5+
6+
@Component({
7+
selector: 'load-dt-options-with-promise',
8+
templateUrl: 'load-dt-options-with-promise.component.html'
9+
})
10+
export class LoadDtOptionsWithPromiseComponent implements OnInit {
11+
dtOptions: any = {};
12+
13+
constructor(@Inject(Http) private http: Http) {}
14+
15+
ngOnInit(): void {
16+
this.dtOptions = this.http.get('data/dtOptions.json')
17+
.toPromise()
18+
.then(response => response.json())
19+
.catch(this.handleError);
20+
}
21+
22+
private handleError(error: any): Promise<any> {
23+
console.error('An error occurred', error); // for demo purposes only
24+
return Promise.reject(error.message || error);
25+
}
26+
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ <h3>
4848
<div class="collapsible-body">
4949
<ul>
5050
<li><a routerLink="/advanced/dt-instance">Fetching DataTable instances</a></li>
51+
<li><a routerLink="/advanced/load-dt-options-with-promise">Load DT options with promise</a></li>
5152
<li><a routerLink="/advanced/row-click-event">Row click event</a></li>
5253
</ul>
5354
</div>

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@ import { WithAjaxSnippetComponent } from './basic/with-ajax-snippet.component';
2626
// Advanced examples
2727
import { DtInstanceComponent } from './advanced/dt-instance.component';
2828
import { DtInstanceSnippetComponent } from './advanced/dt-instance-snippet.component';
29+
import { LoadDtOptionsWithPromiseComponent } from './advanced/load-dt-options-with-promise.component';
30+
import { LoadDtOptionsWithPromiseSnippetComponent } from './advanced/load-dt-options-with-promise-snippet.component';
2931
import { RowClickEventComponent } from './advanced/row-click-event.component';
3032
import { RowClickEventSnippetComponent } from './advanced/row-click-event-snippet.component';
3133

@@ -44,6 +46,8 @@ import { RowClickEventSnippetComponent } from './advanced/row-click-event-snippe
4446

4547
DtInstanceComponent,
4648
  DtInstanceSnippetComponent,
49+
LoadDtOptionsWithPromiseComponent,
50+
LoadDtOptionsWithPromiseSnippetComponent,
4751
RowClickEventComponent,
4852
RowClickEventSnippetComponent
4953
],

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { WithOptionsComponent } from './basic/with-options.component';
99
import { WithAjaxComponent } from './basic/with-ajax.component';
1010

1111
import { DtInstanceComponent } from './advanced/dt-instance.component';
12+
import { LoadDtOptionsWithPromiseComponent } from './advanced/load-dt-options-with-promise.component';
1213
import { RowClickEventComponent } from './advanced/row-click-event.component';
1314

1415
const routes: Routes = [
@@ -41,6 +42,10 @@ const routes: Routes = [
4142
path: 'advanced/dt-instance',
4243
component: DtInstanceComponent
4344
},
45+
{
46+
path: 'advanced/load-dt-options-with-promise',
47+
component: LoadDtOptionsWithPromiseComponent
48+
},
4449
{
4550
path: 'advanced/row-click-event',
4651
component: RowClickEventComponent

‎demo/src/data/dtOptions.json

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"ajax": "data/data.json",
3+
"displayLength": 2,
4+
"paginationType": "full_numbers",
5+
"columns": [
6+
{
7+
"data": "id",
8+
"title": "ID"
9+
},
10+
{
11+
"data": "firstName",
12+
"title": "First name"
13+
},
14+
{
15+
"data": "lastName",
16+
"title": "Last name",
17+
"visible": false
18+
}
19+
]
20+
}

0 commit comments

Comments
 (0)