source: ether_statistics/web/resources/js/Wijmo.2.2.2/Wijmo-Complete/development-bundle/samples/grid/custom-paging.html @ 604

Last change on this file since 604 was 604, checked in by vmipsl, 12 years ago

images
File size: 4.9 KB
Line 
1<!doctype html>
2<html lang="en">
3<head>
4    <title>Grid - Custom Paging</title>
5    <meta charset="utf-8" />
6    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
7    <meta name="description" content="" />
8    <meta name="keywords" content="" />
9    <meta name="author" content="ComponentOne" />
10   
11    <link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
12    <link href="../../themes/wijmo/jquery.wijmo-open.2.2.2.css" rel="stylesheet" type="text/css" />
13    <link href="../../themes/wijmo/jquery.wijmo.wijpager.css" rel="stylesheet" type="text/css" />
14    <link href="../../themes/wijmo/jquery.wijmo.wijgrid.css" rel="stylesheet" type="text/css" />
15
16    <script src="../../external/jquery-1.8.0.min.js" type="text/javascript"></script>
17    <script src="../../external/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>
18    <script src="../../external/globalize.min.js" type="text/javascript"></script>
19    <script src="../../external/jquery.mousewheel.min.js" type="text/javascript"></script>
20
21    <script src="../../external/jquery.wijmo-open.all.2.2.2.min.js" type="text/javascript"></script>
22    <script src="../../wijmo/jquery.wijmo.wijdatasource.js" type="text/javascript"></script>
23    <script src="../../wijmo/jquery.wijmo.wijpager.js" type="text/javascript"></script>
24    <script src="../../wijmo/jquery.wijmo.wijgrid.js" type="text/javascript"></script>
25
26    <style type="text/css">
27        .wijmo-wijgrid
28        {
29            min-height: 100px;
30        }
31    </style>
32
33    <script id="scriptInit" type="text/javascript">
34                        $(document).ready(function () {
35
36                                // * local data
37                                $("#demo-local").wijgrid({
38                                        allowPaging: true,
39                                        pageSize: 5,
40
41                                        data: new wijdatasource({
42                                                dynamic: true,
43                                                loading: function (dataSource, userData) {
44                                                        var r = userData.data.paging;
45                                                        var fooData = [];
46
47                                                        for (var i = r.pageIndex * r.pageSize; i < (r.pageIndex + 1) * r.pageSize; i++) {
48                                                                fooData.push({ "ID": i, "Name": "Name" + i });
49                                                        }
50
51                                                        dataSource.data = {
52                                                                totalRows: 100,
53                                                                rows: fooData
54                                                        }
55                                                }
56                                        })
57                                });
58                                // * local data
59
60                                // * remote data
61                                $("#demo-remote").wijgrid({
62                                        allowPaging: true,
63                                        pageSize: 5,
64
65                                        data: new wijdatasource({
66                                                dynamic: true,
67                                                proxy: new wijhttpproxy({
68                                                        url: "http://netflix.cloudapp.net/Catalog/Genres('Horror Movies')/Titles/",
69                                                        dataType: "jsonp",
70                                                        jsonp: "$callback",
71                                                        data: {
72                                                                $format: "json",
73                                                                $inlinecount: "allpages",
74                                                                $select: "Name,ReleaseYear,AverageRating,BoxArt"
75                                                        },
76                                                        key: "d"
77                                                }),
78
79                                                reader: {
80                                                        read: function (dataSource) {
81                                                                var count = parseInt(dataSource.data.__count, 10);
82
83                                                                $("#entries").text("(" + count + " entries found)");
84
85                                                                dataSource.data = dataSource.data.results;
86                                                                dataSource.data.totalRows = count;
87
88                                                                new wijarrayreader([{ name: "Name", mapping: "Name" },
89                                                                        { name: "ReleaseYear", mapping: "ReleaseYear" },
90                                                                        { name: "Rating", mapping: "AverageRating" },
91                                                                        { name: "Cover", mapping: function (item) { return item.BoxArt.SmallUrl; } }]
92                                                                ).read(dataSource);
93                                                        }
94                                                },
95
96                                                loading: function (dataSource, userData) {
97                                                        var r = userData.data.paging;
98                                                        dataSource.proxy.options.data.$skip = r.pageIndex * r.pageSize;
99                                                        dataSource.proxy.options.data.$top = r.pageSize;
100                                                }
101                                        }),
102
103                                        columns: [
104                                                {}, {}, {},
105                                                {
106                                                        cellFormatter: function (args) {
107                                                                if (args.row.type & $.wijmo.wijgrid.rowType.data) {
108                                                                        args.$container
109                                                                                .css("text-align", "center")
110                                                                                .empty()
111                                                                                .append($("<img />")
112                                                                                .attr("src", args.row.data.Cover));
113
114                                                                        return true;
115                                                                }
116                                                        }
117                                                }
118                                        ]
119
120                                });
121                                // * remote data
122                        });
123    </script>
124</head>
125<body class="demo-single">
126    <div class="container">
127        <div class="header">
128            <h2>
129                Custom Paging</h2>
130        </div>
131        <div class="main demo">
132            <!-- Begin demo markup -->
133            <p>Custom paging using local data</p>
134            <table id="demo-local">
135            </table>
136
137            <p>Custom paging using remote data <span id="entries">...</span></p>
138            <table id="demo-remote">
139            </table>
140            <!-- End demo markup -->
141            <div class="demo-options">
142                <!-- Begin options markup -->
143                <!-- End options markup -->
144            </div>
145            <div class="footer demo-description">
146                <p>
147                    This sample shows how to use custom paging using local and remote data.
148                </p>
149            </div>
150        </div>
151    </div>
152</body>
153</html>
Note: See TracBrowser for help on using the repository browser.