Skip to content

Commit 3eb9080

Browse files
siarhei-arzamasausiarhei-arzamasau
authored
🎹 Pagination: Create Overview demo page. (jQuery) (#28452)
Co-authored-by: Sergey Arzamasov <sergey.arzamasov@devexpress.com>
1 parent 868eb1e commit 3eb9080

24 files changed

+1250
-1
lines changed

‎apps/demos/Demos/Pagination/Overview/Angular/app/app.component.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<dx-data-grid
2+
id="gridContainer"
3+
[dataSource]="customers"
4+
[columns]="['CompanyName', 'City', 'State', 'Phone', 'Fax']"
5+
[showBorders]="true"
6+
>
7+
</dx-data-grid>

‎apps/demos/Demos/Pagination/Overview/Angular/app/app.component.ts‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { NgModule, Component, enableProdMode } from '@angular/core';
2+
import { BrowserModule } from '@angular/platform-browser';
3+
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
4+
import { DxDataGridModule } from 'devextreme-angular';
5+
import { Customer, Service } from './app.service';
6+
7+
if (!/localhost/.test(document.location.host)) {
8+
enableProdMode();
9+
}
10+
11+
let modulePrefix = '';
12+
// @ts-ignore
13+
if (window && window.config.packageConfigPaths) {
14+
modulePrefix = '/app';
15+
}
16+
17+
@Component({
18+
selector: 'demo-app',
19+
templateUrl: `.${modulePrefix}/app.component.html`,
20+
providers: [Service],
21+
})
22+
export class AppComponent {
23+
customers: Customer[];
24+
25+
constructor(service: Service) {
26+
this.customers = service.getCustomers();
27+
}
28+
}
29+
30+
@NgModule({
31+
imports: [
32+
BrowserModule,
33+
DxDataGridModule,
34+
],
35+
declarations: [AppComponent],
36+
bootstrap: [AppComponent],
37+
})
38+
export class AppModule { }
39+
40+
platformBrowserDynamic().bootstrapModule(AppModule);

‎apps/demos/Demos/Pagination/Overview/Angular/app/app.service.ts‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
import { Injectable } from '@angular/core';
2+
3+
export class Customer {
4+
ID: number;
5+
6+
CompanyName: string;
7+
8+
Address: string;
9+
10+
City: string;
11+
12+
State: string;
13+
14+
Zipcode: number;
15+
16+
Phone: string;
17+
18+
Fax: string;
19+
20+
Website: string;
21+
}
22+
23+
let customers: Customer[] = [{
24+
ID: 1,
25+
CompanyName: 'Super Mart of the West',
26+
Address: '702 SW 8th Street',
27+
City: 'Bentonville',
28+
State: 'Arkansas',
29+
Zipcode: 72716,
30+
Phone: '(800) 555-2797',
31+
Fax: '(800) 555-2171',
32+
Website: 'http://www.nowebsitesupermart.dx',
33+
}, {
34+
ID: 2,
35+
CompanyName: 'Electronics Depot',
36+
Address: '2455 Paces Ferry Road NW',
37+
City: 'Atlanta',
38+
State: 'Georgia',
39+
Zipcode: 30339,
40+
Phone: '(800) 595-3232',
41+
Fax: '(800) 595-3231',
42+
Website: 'http://www.nowebsitedepot.dx',
43+
}, {
44+
ID: 3,
45+
CompanyName: 'K&S Music',
46+
Address: '1000 Nicllet Mall',
47+
City: 'Minneapolis',
48+
State: 'Minnesota',
49+
Zipcode: 55403,
50+
Phone: '(612) 304-6073',
51+
Fax: '(612) 304-6074',
52+
Website: 'http://www.nowebsitemusic.dx',
53+
}, {
54+
ID: 4,
55+
CompanyName: "Tom's Club",
56+
Address: '999 Lake Drive',
57+
City: 'Issaquah',
58+
State: 'Washington',
59+
Zipcode: 98027,
60+
Phone: '(800) 955-2292',
61+
Fax: '(800) 955-2293',
62+
Website: 'http://www.nowebsitetomsclub.dx',
63+
}, {
64+
ID: 5,
65+
CompanyName: 'E-Mart',
66+
Address: '3333 Beverly Rd',
67+
City: 'Hoffman Estates',
68+
State: 'Illinois',
69+
Zipcode: 60179,
70+
Phone: '(847) 286-2500',
71+
Fax: '(847) 286-2501',
72+
Website: 'http://www.nowebsiteemart.dx',
73+
}, {
74+
ID: 6,
75+
CompanyName: 'Walters',
76+
Address: '200 Wilmot Rd',
77+
City: 'Deerfield',
78+
State: 'Illinois',
79+
Zipcode: 60015,
80+
Phone: '(847) 940-2500',
81+
Fax: '(847) 940-2501',
82+
Website: 'http://www.nowebsitewalters.dx',
83+
}, {
84+
ID: 7,
85+
CompanyName: 'StereoShack',
86+
Address: '400 Commerce S',
87+
City: 'Fort Worth',
88+
State: 'Texas',
89+
Zipcode: 76102,
90+
Phone: '(817) 820-0741',
91+
Fax: '(817) 820-0742',
92+
Website: 'http://www.nowebsiteshack.dx',
93+
}, {
94+
ID: 8,
95+
CompanyName: 'Circuit Town',
96+
Address: '2200 Kensington Court',
97+
City: 'Oak Brook',
98+
State: 'Illinois',
99+
Zipcode: 60523,
100+
Phone: '(800) 955-2929',
101+
Fax: '(800) 955-9392',
102+
Website: 'http://www.nowebsitecircuittown.dx',
103+
}, {
104+
ID: 9,
105+
CompanyName: 'Premier Buy',
106+
Address: '7601 Penn Avenue South',
107+
City: 'Richfield',
108+
State: 'Minnesota',
109+
Zipcode: 55423,
110+
Phone: '(612) 291-1000',
111+
Fax: '(612) 291-2001',
112+
Website: 'http://www.nowebsitepremierbuy.dx',
113+
}, {
114+
ID: 10,
115+
CompanyName: 'ElectrixMax',
116+
Address: '263 Shuman Blvd',
117+
City: 'Naperville',
118+
State: 'Illinois',
119+
Zipcode: 60563,
120+
Phone: '(630) 438-7800',
121+
Fax: '(630) 438-7801',
122+
Website: 'http://www.nowebsiteelectrixmax.dx',
123+
}, {
124+
ID: 11,
125+
CompanyName: 'Video Emporium',
126+
Address: '1201 Elm Street',
127+
City: 'Dallas',
128+
State: 'Texas',
129+
Zipcode: 75270,
130+
Phone: '(214) 854-3000',
131+
Fax: '(214) 854-3001',
132+
Website: 'http://www.nowebsitevideoemporium.dx',
133+
}, {
134+
ID: 12,
135+
CompanyName: 'Screen Shop',
136+
Address: '1000 Lowes Blvd',
137+
City: 'Mooresville',
138+
State: 'North Carolina',
139+
Zipcode: 28117,
140+
Phone: '(800) 445-6937',
141+
Fax: '(800) 445-6938',
142+
Website: 'http://www.nowebsitescreenshop.dx',
143+
}];
144+
145+
@Injectable()
146+
export class Service {
147+
getCustomers() {
148+
return customers;
149+
}
150+
}

‎apps/demos/Demos/Pagination/Overview/Angular/index.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
3+
<head>
4+
<title>DevExtreme Demo</title>
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
8+
<link rel="stylesheet" type="text/css" href="../../../../node_modules/devextreme/dist/css/dx.light.css" />
9+
10+
<script src="../../../../node_modules/core-js/client/shim.min.js"></script>
11+
<script src="../../../../node_modules/zone.js/dist/zone.js"></script>
12+
<script src="../../../../node_modules/reflect-metadata/Reflect.js"></script>
13+
<script src="../../../../node_modules/systemjs/dist/system.js"></script>
14+
15+
<script src="config.js"></script>
16+
<script>
17+
System.import("app").catch(console.error.bind(console));
18+
</script>
19+
</head>
20+
21+
<body class="dx-viewport">
22+
<div class="demo-container">
23+
<demo-app>Loading...</demo-app>
24+
</div>
25+
</body>
26+
</html>

‎apps/demos/Demos/Pagination/Overview/React/App.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React from "react";
2+
import Text from "./Text.js";
3+
import Pagination from "devextreme-react/pagination";
4+
import { customers } from "./data.js";
5+
6+
const columns = ["CompanyName", "City", "State", "Phone", "Fax"];
7+
8+
const App = () => {
9+
return (
10+
<>
11+
<Pagination />
12+
<Text />
13+
</>
14+
);
15+
};
16+
17+
export default App;

‎apps/demos/Demos/Pagination/Overview/React/Text.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import React from "react";
2+
3+
const Text = () => {
4+
return "test text";
5+
};
6+
7+
export default Text;

‎apps/demos/Demos/Pagination/Overview/React/data.js‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
export const customers = [{
2+
ID: 1,
3+
CompanyName: 'Super Mart of the West',
4+
Address: '702 SW 8th Street',
5+
City: 'Bentonville',
6+
State: 'Arkansas',
7+
Zipcode: 72716,
8+
Phone: '(800) 555-2797',
9+
Fax: '(800) 555-2171',
10+
Website: 'http://www.nowebsitesupermart.dx',
11+
}, {
12+
ID: 2,
13+
CompanyName: 'Electronics Depot',
14+
Address: '2455 Paces Ferry Road NW',
15+
City: 'Atlanta',
16+
State: 'Georgia',
17+
Zipcode: 30339,
18+
Phone: '(800) 595-3232',
19+
Fax: '(800) 595-3231',
20+
Website: 'http://www.nowebsitedepot.dx',
21+
}, {
22+
ID: 3,
23+
CompanyName: 'K&S Music',
24+
Address: '1000 Nicllet Mall',
25+
City: 'Minneapolis',
26+
State: 'Minnesota',
27+
Zipcode: 55403,
28+
Phone: '(612) 304-6073',
29+
Fax: '(612) 304-6074',
30+
Website: 'http://www.nowebsitemusic.dx',
31+
}, {
32+
ID: 4,
33+
CompanyName: "Tom's Club",
34+
Address: '999 Lake Drive',
35+
City: 'Issaquah',
36+
State: 'Washington',
37+
Zipcode: 98027,
38+
Phone: '(800) 955-2292',
39+
Fax: '(800) 955-2293',
40+
Website: 'http://www.nowebsitetomsclub.dx',
41+
}, {
42+
ID: 5,
43+
CompanyName: 'E-Mart',
44+
Address: '3333 Beverly Rd',
45+
City: 'Hoffman Estates',
46+
State: 'Illinois',
47+
Zipcode: 60179,
48+
Phone: '(847) 286-2500',
49+
Fax: '(847) 286-2501',
50+
Website: 'http://www.nowebsiteemart.dx',
51+
}, {
52+
ID: 6,
53+
CompanyName: 'Walters',
54+
Address: '200 Wilmot Rd',
55+
City: 'Deerfield',
56+
State: 'Illinois',
57+
Zipcode: 60015,
58+
Phone: '(847) 940-2500',
59+
Fax: '(847) 940-2501',
60+
Website: 'http://www.nowebsitewalters.dx',
61+
}, {
62+
ID: 7,
63+
CompanyName: 'StereoShack',
64+
Address: '400 Commerce S',
65+
City: 'Fort Worth',
66+
State: 'Texas',
67+
Zipcode: 76102,
68+
Phone: '(817) 820-0741',
69+
Fax: '(817) 820-0742',
70+
Website: 'http://www.nowebsiteshack.dx',
71+
}, {
72+
ID: 8,
73+
CompanyName: 'Circuit Town',
74+
Address: '2200 Kensington Court',
75+
City: 'Oak Brook',
76+
State: 'Illinois',
77+
Zipcode: 60523,
78+
Phone: '(800) 955-2929',
79+
Fax: '(800) 955-9392',
80+
Website: 'http://www.nowebsitecircuittown.dx',
81+
}, {
82+
ID: 9,
83+
CompanyName: 'Premier Buy',
84+
Address: '7601 Penn Avenue South',
85+
City: 'Richfield',
86+
State: 'Minnesota',
87+
Zipcode: 55423,
88+
Phone: '(612) 291-1000',
89+
Fax: '(612) 291-2001',
90+
Website: 'http://www.nowebsitepremierbuy.dx',
91+
}, {
92+
ID: 10,
93+
CompanyName: 'ElectrixMax',
94+
Address: '263 Shuman Blvd',
95+
City: 'Naperville',
96+
State: 'Illinois',
97+
Zipcode: 60563,
98+
Phone: '(630) 438-7800',
99+
Fax: '(630) 438-7801',
100+
Website: 'http://www.nowebsiteelectrixmax.dx',
101+
}, {
102+
ID: 11,
103+
CompanyName: 'Video Emporium',
104+
Address: '1201 Elm Street',
105+
City: 'Dallas',
106+
State: 'Texas',
107+
Zipcode: 75270,
108+
Phone: '(214) 854-3000',
109+
Fax: '(214) 854-3001',
110+
Website: 'http://www.nowebsitevideoemporium.dx',
111+
}, {
112+
ID: 12,
113+
CompanyName: 'Screen Shop',
114+
Address: '1000 Lowes Blvd',
115+
City: 'Mooresville',
116+
State: 'North Carolina',
117+
Zipcode: 28117,
118+
Phone: '(800) 445-6937',
119+
Fax: '(800) 445-6938',
120+
Website: 'http://www.nowebsitescreenshop.dx',
121+
}];

‎apps/demos/Demos/Pagination/Overview/React/index.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>DevExtreme Demo</title>
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
8+
<link rel="stylesheet" type="text/css" href="../../../../node_modules/devextreme/dist/css/dx.light.css" />
9+
10+
<script src="../../../../node_modules/core-js/client/shim.min.js"></script>
11+
<script src="../../../../node_modules/systemjs/dist/system.js"></script>
12+
<script type="text/javascript" src="config.js"></script>
13+
<script type="text/javascript">
14+
System.import("./index.js");
15+
</script>
16+
</head>
17+
18+
<body class="dx-viewport">
19+
<div class="demo-container">
20+
<div id="app"></div>
21+
</div>
22+
</body>
23+
</html>

0 commit comments

Comments
 (0)