-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathtest.html
95 lines (84 loc) · 1.98 KB
/
test.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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="bootstrap.min.css" rel="stylesheet" />
<style>
.pagination.disabled a,
.pagination.disabled a:hover,
.pagination.disabled a:focus,
.pagination.disabled span {
color: #eee;
background: #fff;
cursor: default;
}
.pagination {
float: left;
}
.pagination.disabled li.active a {
color: #fff;
background: #cccccc;
border-color: #cccccc;
}
.paging-container select{
float: left;
margin: 20px 0 20px 10px;
padding: 9px 3px;
border-color: #ddd;
border-radius: 4px;
}
#table {
margin-bottom: 0;
}
</style>
<script src="jquery.min.js"></script>
<script src="pagination.js"></script>
<script>
$(function () {
for (var i = 1; i < 202; i++) {
$('#table').append('<tr class="data"><td>' + i + '</td><td>Some title</td><td>Some Description</td></tr>');
}
load = function() {
window.tp = new Pagination('#tablePaging', {
itemsCount: 201,
onPageSizeChange: function (ps) {
console.log('changed to ' + ps);
},
onPageChange: function (paging) {
//custom paging logic here
console.log(paging);
var start = paging.pageSize * (paging.currentPage - 1),
end = start + paging.pageSize,
$rows = $('#table').find('.data');
$rows.hide();
for (var i = start; i < end; i++) {
$rows.eq(i).show();
}
}
});
}
load();
});
</script>
</head>
<body>
<form id="form1">
<table id="table" style="width: 800px" class="table table-bordered">
<tr>
<th>#
</th>
<th>Name
</th>
<th>Desc
</th>
</tr>
</table>
<div class="paging-container" id="tablePaging">
</div>
<div style="clear: both"></div>
<a href="javascipt:void(0)" onclick="load()">reload</a> |
<a href="javascipt:void(0)" onclick="tp.disable()">disble paging</a> |
<a href="javascipt:void(0)" onclick="tp.enable()">enable paging</a>
</form>
</body>
</html>