11<!doctype html>
22< html lang ="en ">
33
4- < head >
5- < meta charset =" utf-8 ">
6- < meta http-equiv ="X-UA-Compatible " content ="IE=edge,chrome=1 ">
7- < meta name ="apple-mobile-web-app-capable " content ="yes " />
8- < meta name ="apple-mobile-web-app-status-bar-style " content ="black " />
9- < meta name ="viewport " content ="width = device-width, minimal-ui, initial-scale = 1, user-scalable = no " />
10- < meta name ="apple-mobile-web-app-title " content ="Datagrid ">
11- < title > Datagrid - Paging</ title >
12- < base href ="/ ">
13- < style >
14- * , * : after , * : before {
15- -webkit-box-sizing : border-box;
16- -moz-box-sizing : border-box;
17- box-sizing : border-box;
18- }
4+ < head >
5+ < meta charset =" utf-8 ">
6+ < meta http-equiv ="X-UA-Compatible " content ="IE=edge,chrome=1 ">
7+ < meta name ="apple-mobile-web-app-capable " content ="yes " />
8+ < meta name ="apple-mobile-web-app-status-bar-style " content ="black " />
9+ < meta name ="viewport " content ="width = device-width, minimal-ui, initial-scale = 1, user-scalable = no " />
10+ < meta name ="apple-mobile-web-app-title " content ="Datagrid ">
11+ < title > Datagrid - Paging</ title >
12+ < base href ="/ ">
13+ < style >
14+ * , * : after , * : before {
15+ -webkit-box-sizing : border-box;
16+ -moz-box-sizing : border-box;
17+ box-sizing : border-box;
18+ }
1919
20- body {
21- font-family : 'RobotoDraft' , 'Roboto' , 'Helvetica Neue, Helvetica, Arial' , sans-serif;
22- font-style : normal;
23- font-weight : 300 ;
24- font-size : 1.4rem ;
25- line-height : 2rem ;
26- letter-spacing : 0.01rem ;
27- color : # 212121 ;
28- background-color : # f5f5f5 ;
29- -webkit-font-smoothing : antialiased;
30- -moz-osx-font-smoothing : grayscale;
31- text-rendering : optimizeLegibility;
32- }
20+ body {
21+ font-family : 'RobotoDraft' , 'Roboto' , 'Helvetica Neue, Helvetica, Arial' , sans-serif;
22+ font-style : normal;
23+ font-weight : 300 ;
24+ font-size : 1.4rem ;
25+ line-height : 2rem ;
26+ letter-spacing : 0.01rem ;
27+ color : # 212121 ;
28+ background-color : # f5f5f5 ;
29+ -webkit-font-smoothing : antialiased;
30+ -moz-osx-font-smoothing : grayscale;
31+ text-rendering : optimizeLegibility;
32+ }
3333
34- .dt {
35- width : 75% ;
36- margin : 50px auto;
37- }
34+ .dt {
35+ width : 75% ;
36+ margin : 50px auto;
37+ }
3838
39- .dt-row-even {
40- background : # f6f7f8 ;
41- }
39+ .dt-row-even {
40+ background : # f6f7f8 ;
41+ }
42+ </ style >
43+ < link href ="../dist/dataTable.css " media ="all " rel ="stylesheet " />
44+ < link href ="../dist/themes/material.css " media ="all " rel ="stylesheet " />
45+ < link href ="http://fontastic.s3.amazonaws.com/Jnf54BZCm7mSjGCxNRbfp3/icons.css " rel ="stylesheet ">
46+ </ head >
4247
43- </ style >
44- < link href ="../dist/dataTable.css " media ="all " rel ="stylesheet " />
45- < link href ="../dist/themes/material.css " media ="all " rel ="stylesheet " />
46- < link href ="http://fontastic.s3.amazonaws.com/Jnf54BZCm7mSjGCxNRbfp3/icons.css " rel ="stylesheet ">
47- </ head >
48+ < body ng-app ="app " ng-controller ="HomeController ">
4849
49- < body ng-app =" app " ng-controller =" HomeController " >
50+ < dtable options =" options " rows =" data " class =" material " > </ dtable >
5051
51- < dtable options ="options " rows ="data " class ="material "> </ dtable >
52+ < script src ="../jspm_packages/system.js "> </ script >
53+ < script src ="../config.js "> </ script >
5254
53- < script src ="../jspm_packages/system.js "> </ script >
54- < script src ="../config.js "> </ script >
55+ < script >
5556
56- < script >
57+ System . import ( 'dataTable' ) . then ( function ( dt ) {
58+ var module = angular . module ( 'app' , [ dt . default . name ] ) ;
5759
58- System . import ( 'dataTable' ) . then ( function ( dt ) {
59- var module = angular . module ( 'app' , [ dt . default . name ] ) ;
60+ module . controller ( 'HomeController' , function ( $scope , $http ) {
61+ $scope . data = [ ] ;
6062
61- module . controller ( 'HomeController' , function ( $scope , $http ) {
62- $scope . data = [ ] ;
63+ $scope . options = {
64+ rowHeight : 50 ,
65+ headerHeight : 50 ,
66+ footerHeight : 50 ,
67+ scrollbarV : false ,
68+ sortType : 'single' ,
69+ columns : [
70+ { name : 'Name' , prop : 'name' } ,
71+ { name : 'Gender' , prop : 'gender' } ,
72+ { name : 'Company' , prop : 'company' }
73+ ] ,
74+ columnMode : 'force' ,
75+ paging : {
76+ size : 10
77+ }
78+ } ;
6379
64- $scope . options = {
65- rowHeight : 50 ,
66- headerHeight : 50 ,
67- footerHeight : 50 ,
68- scrollbarV : false ,
69- sortType : 'single' ,
70- columns : [
71- { name : 'Name' , prop : 'name' } ,
72- { name : 'Gender' , prop : 'gender' } ,
73- { name : 'Company' , prop : 'company' }
74- ] ,
75- columnMode : 'force' ,
76- paging : {
77- size : 10
78- }
79- } ;
80-
81- $http . get ( '/demos/data/100.json' ) . success ( function ( d ) {
82- $scope . data = d ;
80+ $http . get ( '/demos/data/100.json' ) . success ( function ( d ) {
81+ $scope . data = d ;
82+ } ) ;
8383 } ) ;
8484 } ) ;
85- } ) ;
86- </ script >
87- </ body >
85+ </ script >
86+ </ body >
87+
8888</ html >
0 commit comments