Skip to content

Commit ac66fd3

Browse files
author
mariuszfoltak
committed
Change examples
1 parent 170b856 commit ac66fd3

File tree

3 files changed

+45
-52
lines changed

3 files changed

+45
-52
lines changed

‎examples/systemjs/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
88
<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap-theme.min.css">
99

10-
1110
<script src="/node_modules/angular2/bundles/angular2-polyfills.js"></script>
1211
<script src="/node_modules/es6-shim/es6-shim.min.js"></script>
1312
<script src="/node_modules/systemjs/dist/system.src.js"></script>
@@ -22,7 +21,7 @@
2221
"/angular2": {"defaultExtension": false}
2322
},
2423
map: {
25-
'mf-angular2-table': 'node_modules/mf-angular2-table'
24+
'angular2-datatable': 'node_modules/angular2-datatable'
2625
}
2726
});
2827
</script>
@@ -39,5 +38,6 @@
3938

4039
<app></app>
4140

41+
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
4242
</body>
4343
</html>

‎examples/systemjs/src/app.html‎

Lines changed: 41 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,51 @@
11
<div class="container">
22
<div class="col-xs-8 col-md-offset-2">
33

4-
<input [ngModel]="activePage" (ngModelChange)="activePage = toInt($event)"/>
5-
<input [ngModel]="rowsOnPage" (ngModelChange)="rowsOnPage = toInt($event)"/>
4+
<div class="page-header">
5+
<h1>
6+
<span>Angular2 DataTable component</span><br/>
7+
<small>by mariuszfoltak</small>
8+
</h1>
9+
</div>
610

7-
<table class="table table-striped" [mfTable]="data" #mf="mfTable">
8-
<thead>
9-
<tr>
10-
<th style="width: 20%"><mfDefaultSorter by="name">Name</mfDefaultSorter></th>
11-
<th style="width: 50%"><mfDefaultSorter by="email">Email</mfDefaultSorter></th>
12-
<th style="width: 10%"><mfDefaultSorter by="age">Age</mfDefaultSorter></th>
13-
<th style="width: 20%"><mfDefaultSorter by="city">City</mfDefaultSorter></th>
14-
</tr>
15-
</thead>
16-
<tbody>
17-
<tr *ngFor="#item of mf.data">
18-
<td>{{item.name}}</td>
19-
<td>{{item.email}}</td>
20-
<td class="text-right">{{item.age}}</td>
21-
<td>{{item.city}}</td>
22-
</tr>
23-
</tbody>
24-
<tfoot>
11+
<h2>Simple data table</h2>
12+
13+
<div class="panel panel-default">
14+
<div class="panel-heading">User information</div>
15+
16+
<table class="table table-striped" [mfData]="data" #mf="mfDataTable">
17+
<thead>
18+
<tr>
19+
<th style="width: 20%">
20+
<mfDefaultSorter by="name">Name</mfDefaultSorter>
21+
</th>
22+
<th style="width: 50%">
23+
<mfDefaultSorter by="email">Email</mfDefaultSorter>
24+
</th>
25+
<th style="width: 10%">
26+
<mfDefaultSorter by="age">Age</mfDefaultSorter>
27+
</th>
28+
<th style="width: 20%">
29+
<mfDefaultSorter by="city">City</mfDefaultSorter>
30+
</th>
31+
</tr>
32+
</thead>
33+
<tbody>
34+
<tr *ngFor="#item of mf.data">
35+
<td>{{item.name}}</td>
36+
<td>{{item.email}}</td>
37+
<td class="text-right">{{item.age}}</td>
38+
<td>{{item.city | uppercase}}</td>
39+
</tr>
40+
</tbody>
41+
<tfoot>
2542
<tr>
2643
<td colspan="4">
27-
<mfDefaultPaginator [rowsOnPageSet]="[1,2,3,5,8,13,21,34]" [(rowsOnPage)]="rowsOnPage"
28-
[(activePage)]="activePage" #mbp></mfDefaultPaginator>
44+
<mfBootstrapPaginator [rowsOnPageSet]="[5,10,25]" [rowsOnPage]="5"></mfBootstrapPaginator>
2945
</td>
3046
</tr>
31-
</tfoot>
32-
</table>
33-
<mfDefaultPaginator [rowsOnPageSet]="[1,2,3,5,8,13,21,34]" [mfTable]="mf"></mfDefaultPaginator>
34-
35-
</div>
36-
<div class="col-xs-6 col-md-offset-3">
37-
38-
<table class="table table-striped" [mfTable]="data" #mf2="mfTable">
39-
<thead>
40-
<tr>
41-
<th><mfSort by="name">Name</mfSort></th>
42-
<th><a (click)="mf2.sort('score')">Score</a></th>
43-
<th>Abec</th>
44-
</tr>
45-
</thead>
46-
<tbody>
47-
<tr *ngFor="#item of mf2.data">
48-
<td>{{item.name}}</td>
49-
<td>{{item.score}}</td>
50-
<td>{{item.abec}}</td>
51-
</tr>
52-
</tbody>
53-
</table>
54-
47+
</tfoot>
48+
</table>
49+
</div>
5550
</div>
5651
</div>

‎examples/systemjs/src/app.ts‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,19 @@ import {Component} from 'angular2/core';
22
import {bootstrap} from 'angular2/platform/browser';
33
import {DatePipe} from "angular2/common";
44
import {HTTP_PROVIDERS, Http} from "angular2/http";
5-
import {MfTable, MfDefaultSorter, MfDefaultPaginator} from 'mf-angular2-table/components';
5+
import {DataTableDirectives} from 'angular2-datatable/datatable';
66

77

88
@Component({
99
selector: 'app',
1010
templateUrl: 'src/app.html',
1111
providers: [HTTP_PROVIDERS],
12-
directives: [MfTable, MfDefaultSorter, MfDefaultPaginator],
12+
directives: [DataTableDirectives],
1313
pipes: [DatePipe]
1414
})
1515
export class App {
1616

1717
private data = [];
18-
private activePage = 1;
19-
private rowsOnPage = 8;
2018

2119
constructor(private http: Http) {
2220
http.get("/src/data.json")

0 commit comments

Comments
 (0)