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

Commit 62463ee

Browse files
shanmukhatejashanmukhateja
committed
misc: project changes pt2
1 parent 11273b4 commit 62463ee

17 files changed

+230
-158
lines changed

‎demo/TODO

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,4 @@
1+
Usage menu item for Filtering
12
AJAX callback example
23
Server-side example
4+
Update router link example to use Angular Pipes/TemplateRef

‎demo/src/app/advanced/dt-instance.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { DataTableDirective } from 'angular-datatables';
88
})
99
export class DtInstanceComponent implements OnInit {
1010

11-
pageTitle = 'Getting the DataTable instance';
11+
pageTitle = 'Finding DataTable instance';
1212
mdIntro = 'assets/docs/advanced/dt-instance/intro.md';
1313
mdHTML = 'assets/docs/advanced/dt-instance/source-html.md';
1414
mdTS = 'assets/docs/advanced/dt-instance/source-ts.md';

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { HttpClient } from '@angular/common/http';
77
})
88
export class LoadDtOptionsWithPromiseComponent implements OnInit {
99

10-
pageTitle = 'Load DataTables Options with Promise';
10+
pageTitle = 'Load DT Options with Promise';
1111
mdIntro = 'assets/docs/advanced/load-dt-opt-with-promise/intro.md';
1212
mdHTML = 'assets/docs/advanced/load-dt-opt-with-promise/source-html.md';
1313
mdTS = 'assets/docs/advanced/load-dt-opt-with-promise/source-ts.md';

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { DataTableDirective } from 'angular-datatables';
77
})
88
export class MultipleTablesComponent implements OnInit {
99

10-
pageTitle = 'Multiple DataTables in the same page';
10+
pageTitle = 'Multiple tables in the same page';
1111
mdIntro = 'assets/docs/advanced/multiple-tables/intro.md';
1212
mdHTML = 'assets/docs/advanced/multiple-tables/source-html.md';
1313
mdTS = 'assets/docs/advanced/multiple-tables/source-ts.md';

‎demo/src/app/app.component.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ ul.side-nav.fixed ul.collapsible-accordion .collapsible-body li a {
3434
}
3535

3636
.side-nav .logo a {
37-
height: 140px;
37+
height: 120px !important;
3838
background-color: #66ceff;
3939
color: #fff;
4040
}

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

Lines changed: 134 additions & 141 deletions
Original file line numberDiff line numberDiff line change
@@ -1,160 +1,153 @@
11
<header>
2-
<div class="container">
3-
<a data-activates="nav-mobile"
4-
class="button-collapse top-nav waves-effect waves-light circle hide-on-large-only">
5-
<i class="material-icons">menu</i>
2+
<div class="container">
3+
<a data-activates="nav-mobile" class="button-collapse top-nav waves-effect waves-light circle hide-on-large-only">
4+
<i class="material-icons">menu</i>
5+
</a>
6+
</div>
7+
8+
<ul id="nav-mobile" class="side-nav fixed">
9+
<li class="logo">
10+
<h3>
11+
<a id="logo-container" routerLink="" class="brand-logo">
12+
<div class="logo-img">
13+
<img src="assets/angular.png" alt="Angular" />
14+
<span class="plus">+</span>
15+
<img src="assets/datatables.png" alt="DataTables" />
16+
</div>
617
</a>
7-
</div>
18+
</h3>
19+
</li>
20+
<li><a class="subheader">Getting Started</a></li>
21+
<li class="bold">
22+
<a routerLink="/getting-started" class="waves-effect waves-teal">Installation</a>
23+
</li>
24+
<li class="bold">
25+
<a routerLink="/basic/with-ajax" class="waves-effect waves-teal">Quickstart</a>
26+
</li>
27+
<li>
28+
<div class="divider"></div>
29+
</li>
30+
<li><a class="subheader">Usage</a></li>
831

9-
<ul id="nav-mobile" class="side-nav fixed">
10-
<li class="logo">
11-
<h3>
12-
<a id="logo-container" routerLink="" class="brand-logo">
13-
<div class="logo-img">
14-
<img src="assets/angular.png" alt="Angular" />
15-
<span class="plus">+</span>
16-
<img src="assets/datatables.png" alt="DataTables" />
17-
</div>
18-
</a>
19-
</h3>
32+
<li class="no-padding">
33+
<ul class="collapsible collapsible-accordion">
34+
<li class="bold">
35+
<a class="collapsible-header waves-effect waves-teal">Basic Examples</a>
36+
<div class="collapsible-body">
37+
<ul>
38+
<li>
39+
<a routerLink="/basic/zero-config">Zero configuration</a>
40+
</li>
41+
<li>
42+
<a routerLink="/basic/with-options">With options</a>
43+
</li>
44+
<li>
45+
<a routerLink="/advanced/row-click-event">Row click event</a>
46+
</li>
47+
<li>
48+
<a routerLink="/advanced/multiple-tables">Multiple tables</a>
49+
</li>
50+
<li>
51+
<a routerLink="/advanced/dt-instance">Fetching DataTable instances</a>
52+
</li>
53+
<li>
54+
<a routerLink="/advanced/load-dt-options-with-promise">Load DT options with promise</a>
55+
</li>
56+
</ul>
57+
</div>
2058
</li>
21-
<li class="source">
22-
<table>
23-
<tbody>
24-
<tr>
25-
<td>
26-
<a href="https://www.npmjs.com/package/angular-datatables" title="Install with NPM">
27-
<img src="assets/npm.png" alt="NPM" />
28-
</a>
29-
</td>
30-
<td>
31-
<a href="https://github.com/l-lin/angular-datatables" title="View Source on Github">
32-
<img src="assets/github.png" alt="Github" />
33-
</a>
34-
</td>
35-
</tbody>
36-
</table>
59+
<li class="bold">
60+
<a class="collapsible-header waves-effect waves-teal">Angular</a>
61+
<div class="collapsible-body">
62+
<ul>
63+
<li>
64+
<a routerLink="/advanced/using-pipe">Using Pipes</a>
65+
</li>
66+
<li>
67+
<a routerLink="/advanced/using-template-ref">Using TemplateRef</a>
68+
</li>
69+
<li>
70+
<a routerLink="/advanced/rerender">Re-render table</a>
71+
</li>
72+
<li>
73+
<a routerLink="/advanced/router-link">Router link</a>
74+
</li>
75+
</ul>
76+
</div>
3777
</li>
38-
<li><div class="divider"></div></li>
39-
<li><a class="subheader">Getting Started</a></li>
4078
<li class="bold">
41-
<a routerLink="/getting-started" class="waves-effect waves-teal">Installation</a>
79+
<a class="collapsible-header waves-effect waves-teal">Filtering</a>
80+
<div class="collapsible-body">
81+
<ul>
82+
<li>
83+
<a routerLink="/advanced/custom-range-search">Custom filtering - Range search</a>
84+
</li>
85+
<li>
86+
<a routerLink="/advanced/individual-column-filtering">Individual column filtering</a>
87+
</li>
88+
</ul>
89+
</div>
4290
</li>
4391
<li class="bold">
44-
<a routerLink="/basic/with-ajax" class="waves-effect waves-teal">Quickstart</a>
92+
<a class="collapsible-header waves-effect waves-teal">DT extensions</a>
93+
<div class="collapsible-body">
94+
<ul>
95+
<li>
96+
<a routerLink="/extensions/buttons">Buttons extension</a>
97+
</li>
98+
<li>
99+
<a routerLink="/extensions/colreorder">ColReorder extension</a>
100+
</li>
101+
<li>
102+
<a routerLink="/extensions/responsive">Responsive extension</a>
103+
</li>
104+
<li>
105+
<a routerLink="/extensions/select">Select extension</a>
106+
</li>
107+
</ul>
108+
</div>
45109
</li>
46-
<li><div class="divider"></div></li>
47-
<li><a class="subheader">Usage</a></li>
110+
<li>
111+
<div class="divider"></div>
112+
</li>
113+
<li><a class="subheader">Support</a></li>
48114

49-
<li class="no-padding">
50-
<ul class="collapsible collapsible-accordion">
51-
<li class="bold">
52-
<a class="collapsible-header waves-effect waves-teal">Basic Examples</a>
53-
<div class="collapsible-body">
54-
<ul>
55-
<li>
56-
<a routerLink="/basic/zero-config">Zero configuration</a>
57-
</li>
58-
<li>
59-
<a routerLink="/basic/with-options">With options</a>
60-
</li>
61-
<li>
62-
<a routerLink="/advanced/dt-instance">Fetching DataTable instances</a>
63-
</li>
64-
</ul>
65-
</div>
66-
</li>
67-
<li class="bold">
68-
<a class="collapsible-header waves-effect waves-teal">Features</a>
69-
<div class="collapsible-body">
70-
<ul>
71-
<li>
72-
<a routerLink="/advanced/custom-range-search">Custom filtering - Range search</a>
73-
</li>
74-
<li>
75-
<a routerLink="/advanced/individual-column-filtering">Individual column filtering</a>
76-
</li>
77-
<li>
78-
<a routerLink="/advanced/load-dt-options-with-promise">Load DT options with promise</a>
79-
</li>
80-
<li>
81-
<a routerLink="/advanced/rerender">Rerender</a>
82-
</li>
83-
<li>
84-
<a routerLink="/advanced/row-click-event">Row click event</a>
85-
</li>
86-
<li>
87-
<a routerLink="/advanced/multiple-tables">Multiple tables</a>
88-
</li>
89-
<li>
90-
<a routerLink="/advanced/router-link">Router link</a>
91-
</li>
92-
<li>
93-
<a routerLink="/advanced/using-pipe">Using Angular Pipes</a>
94-
</li>
95-
<li>
96-
<a routerLink="/advanced/using-template-ref">Using Angular TemplateRef</a>
97-
</li>
98-
</ul>
99-
</div>
100-
</li>
101-
<li><div class="divider"></div></li>
102-
<li><a class="subheader">Support</a></li>
103-
<li class="bold">
104-
<a class="collapsible-header waves-effect waves-teal">DT extensions</a>
105-
<div class="collapsible-body">
106-
<ul>
107-
<li>
108-
<a routerLink="/extensions/buttons">Buttons extension</a>
109-
</li>
110-
<li>
111-
<a routerLink="/extensions/colreorder">ColReorder extension</a>
112-
</li>
113-
<li>
114-
<a routerLink="/extensions/responsive">Responsive extension</a>
115-
</li>
116-
<li>
117-
<a routerLink="/extensions/select">Select extension</a>
118-
</li>
119-
</ul>
120-
</div>
121-
</li>
122-
<li class="bold">
123-
<a routerLink="/faq" class="waves-effect waves-teal">FAQ</a>
124-
</li>
125-
<li><div class="divider"></div></li>
126-
<li><a class="subheader">Deprecations</a></li>
127-
<li class="bold">
128-
<a class="collapsible-header waves-effect waves-white">Legacy <span class="new badge red" data-badge-caption="">NOT SUPPORTED</span></a>
129-
<div class="collapsible-body">
130-
<ul>
131-
<li>
132-
<a routerLink="/basic/angular-way">Angular way</a>
133-
</li>
134-
<li>
135-
<a routerLink="/basic/server-side-angular-way">Server side the Angular way</a>
136-
</li>
137-
</ul>
138-
</div>
139-
</li>
140-
</ul>
115+
<li class="bold">
116+
<a routerLink="/faq" class="waves-effect waves-teal">FAQ</a>
117+
</li>
118+
<li class="bold">
119+
<a routerLink="/more-help" class="waves-effect waves-teal">Resources</a>
120+
</li>
121+
<li>
122+
<div class="divider"></div>
123+
</li>
124+
<li><a class="subheader">Deprecated <span class="new badge red" data-badge-caption="">NOT SUPPORTED</span></a>
141125
</li>
142-
</ul>
126+
<li class="bold">
127+
<a routerLink="/basic/angular-way">Angular way</a>
128+
</li>
129+
<li class="bold">
130+
<a routerLink="/basic/server-side-angular-way">Server side the Angular way</a>
131+
</li>
132+
</ul>
133+
</li>
134+
</ul>
143135
</header>
144136

145137
<main>
146-
<router-outlet></router-outlet>
138+
<router-outlet></router-outlet>
147139
</main>
148140

149141
<footer class="page-footer">
150-
<div class="footer-copyright">
151-
<div class="container">
152-
<p>
153-
<span class="white-text text-darken-2"> Designed and built with &lt;3 by
154-
<a class="grey-text text-darken-4" href="https://github.com/l-lin"><u>Louis LIN</u></a>, <a class="grey-text text-darken-4" href="https://github.com/shanmukhateja"><u>Surya Teja K</u></a> and
155-
contributors.
156-
</span>
157-
</p>
158-
</div>
142+
<div class="footer-copyright">
143+
<div class="container">
144+
<p>
145+
<span class="white-text text-darken-2"> Designed and built with &lt;3 by
146+
<a class="grey-text text-darken-4" href="https://github.com/l-lin"><u>Louis LIN</u></a>, <a
147+
class="grey-text text-darken-4" href="https://github.com/shanmukhateja"><u>Surya Teja K</u></a> and
148+
contributors.
149+
</span>
150+
</p>
159151
</div>
152+
</div>
160153
</footer>

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ import { BaseDemoComponent } from './base-demo/base-demo.component';
4545
import { FAQComponent } from './f-a-q/f-a-q.component';
4646
import { UsingNgTemplateRefComponent } from './advanced/using-ng-template-ref.component';
4747
import { DemoNgComponent } from './advanced/demo-ng-template-ref.component';
48+
import { MoreHelpComponent } from './more-help/more-help.component';
4849

4950
@NgModule({
5051
declarations: [
@@ -76,7 +77,8 @@ import { DemoNgComponent } from './advanced/demo-ng-template-ref.component';
7677
BaseDemoComponent,
7778
FAQComponent,
7879
UsingNgTemplateRefComponent,
79-
DemoNgComponent
80+
DemoNgComponent,
81+
MoreHelpComponent
8082
],
8183
imports: [
8284
BrowserModule,

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import { SelectExtensionComponent } from './extensions/select-extension.componen
2727
import { UsingNgPipeComponent } from './advanced/using-ng-pipe.component';
2828
import { FAQComponent } from './f-a-q/f-a-q.component';
2929
import { UsingNgTemplateRefComponent } from './advanced/using-ng-template-ref.component';
30+
import { MoreHelpComponent } from './more-help/more-help.component';
3031

3132
const routes: Routes = [
3233
{
@@ -42,6 +43,10 @@ const routes: Routes = [
4243
path: 'getting-started',
4344
component: GettingStartedComponent
4445
},
46+
{
47+
path: 'more-help',
48+
component: MoreHelpComponent
49+
},
4550
{
4651
path: 'person/:id',
4752
component: PersonComponent

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

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
1-
<div class="section banner">
1+
<div class="top-banner section banner">
22
<div class="container">
33
<div class="row">
44
<div class="col s12 m9">
5-
<h1 class="header center-on-small-only">{{pageTitle}}</h1>
5+
<h2 class="header center-on-small-only">{{pageTitle}}</h2>
66
</div>
77
</div>
88
</div>
99
</div>
1010
<div class="section" *ngIf="deprecated">
11-
<div class="section red white-text" style="padding-left: 10px">
12-
This section has been marked as deprecated. It is listed here for documentation purposes only.
11+
<div class="section red white-text">
12+
<div class="container">
13+
This section has been marked as deprecated. It is listed here for documentation purposes only.
14+
</div>
1315
</div>
1416
</div>
1517

0 commit comments

Comments
 (0)