-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexample.html
132 lines (129 loc) · 3.99 KB
/
example.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>pager example</title>
<link href="http://cdn.bootcss.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="mainDiv">
<table class="table">
<th>ID</th>
<th>Name</th>
<tbody id='tbody'></tbody>
</table>
<div id="pagerDiv"></div>
</div>
</body>
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>
<script src="./pager.js"></script>
<script type="text/javascript">
var jsonData = [
{ 'id': 1, 'name': 'test1' },
{ 'id': 2, 'name': 'test2' },
{ 'id': 3, 'name': 'test3' },
{ 'id': 4, 'name': 'test4' },
{ 'id': 5, 'name': 'test5' },
{ 'id': 6, 'name': 'test6' },
{ 'id': 7, 'name': 'test7' },
{ 'id': 8, 'name': 'test8' },
{ 'id': 9, 'name': 'test9' },
{ 'id': 10, 'name': 'test10' },
{ 'id': 11, 'name': 'test11' },
{ 'id': 12, 'name': 'test12' },
{ 'id': 13, 'name': 'test13' },
{ 'id': 14, 'name': 'test14' },
{ 'id': 15, 'name': 'test15' },
{ 'id': 16, 'name': 'test16' },
{ 'id': 17, 'name': 'test17' },
{ 'id': 18, 'name': 'test18' },
{ 'id': 19, 'name': 'test19' },
{ 'id': 20, 'name': 'test20' },
{ 'id': 21, 'name': 'test21' },
{ 'id': 22, 'name': 'test22' },
{ 'id': 23, 'name': 'test23' },
{ 'id': 24, 'name': 'test24' },
{ 'id': 25, 'name': 'test25' },
{ 'id': 26, 'name': 'test26' },
{ 'id': 27, 'name': 'test27' },
{ 'id': 28, 'name': 'test28' },
{ 'id': 29, 'name': 'test29' },
{ 'id': 30, 'name': 'test30' },
{ 'id': 31, 'name': 'test31' },
{ 'id': 32, 'name': 'test32' },
{ 'id': 33, 'name': 'test33' },
{ 'id': 34, 'name': 'test34' },
{ 'id': 35, 'name': 'test35' },
{ 'id': 36, 'name': 'test36' },
{ 'id': 37, 'name': 'test37' },
{ 'id': 38, 'name': 'test38' },
{ 'id': 39, 'name': 'test39' },
{ 'id': 40, 'name': 'test40' },
{ 'id': 41, 'name': 'test41' },
{ 'id': 42, 'name': 'test42' },
{ 'id': 43, 'name': 'test43' },
{ 'id': 44, 'name': 'test44' },
{ 'id': 45, 'name': 'test45' },
{ 'id': 46, 'name': 'test46' },
{ 'id': 47, 'name': 'test47' },
{ 'id': 48, 'name': 'test48' },
{ 'id': 49, 'name': 'test49' },
{ 'id': 50, 'name': 'test50' },
{ 'id': 51, 'name': 'test51' },
{ 'id': 52, 'name': 'test52' },
{ 'id': 53, 'name': 'test53' },
{ 'id': 54, 'name': 'test54' },
{ 'id': 55, 'name': 'test55' },
{ 'id': 56, 'name': 'test56' },
{ 'id': 57, 'name': 'test57' },
{ 'id': 58, 'name': 'test58' },
{ 'id': 59, 'name': 'test59' },
{ 'id': 60, 'name': 'test60' },
{ 'id': 61, 'name': 'test61' },
{ 'id': 62, 'name': 'test62' },
{ 'id': 63, 'name': 'test63' },
{ 'id': 64, 'name': 'test64' },
{ 'id': 65, 'name': 'test65' },
{ 'id': 66, 'name': 'test66' },
{ 'id': 67, 'name': 'test67' },
{ 'id': 68, 'name': 'test68' },
{ 'id': 69, 'name': 'test69' },
{ 'id': 70, 'name': 'test70' },
{ 'id': 71, 'name': 'test71' },
{ 'id': 72, 'name': 'test72' },
{ 'id': 73, 'name': 'test73' },
{ 'id': 74, 'name': 'test74' },
{ 'id': 75, 'name': 'test75' },
{ 'id': 76, 'name': 'test76' },
{ 'id': 77, 'name': 'test77' },
{ 'id': 78, 'name': 'test78' },
{ 'id': 79, 'name': 'test79' },
{ 'id': 80, 'name': 'test80' },
{ 'id': 81, 'name': 'test81' },
{ 'id': 82, 'name': 'test82' },
{ 'id': 83, 'name': 'test83' },
{ 'id': 84, 'name': 'test84' },
{ 'id': 85, 'name': 'test85' },
{ 'id': 86, 'name': 'test86' },
{ 'id': 87, 'name': 'test87' },
{ 'id': 88, 'name': 'test88' },
{ 'id': 89, 'name': 'test89' },
{ 'id': 90, 'name': 'test90' },
{ 'id': 91, 'name': 'test91' },
{ 'id': 92, 'name': 'test92' },
{ 'id': 93, 'name': 'test93' },
{ 'id': 94, 'name': 'test94' },
{ 'id': 95, 'name': 'test95' },
{ 'id': 96, 'name': 'test96' }
];
pager.init(1);
pager.setLayout('pagerDiv', jsonData, 100, function () {
$('#tbody').html('');
for (var i = pager.start() - 1; i < pager.end(); i++) {
if (jsonData[i]) {
$('#tbody').append('<tr><td>' + jsonData[i].id + '</td><td>' + jsonData[i].name + '</td</tr>');
}
}
});
</script>
</html>