[原创]HTML表格分页 - 蜗牛的JAVA外壳

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2

<html xmlns="http://www.w3.org/1999/xhtml">
3

<head>
4

<title>无标题文档</title>
6

</head>
7

<body>
9

<table width="500" border="0" cellpadding="5" cellspacing="1" bgcolor="#999999" id="table1">
10

<tbody id="table2">
11

<tr>
12

<td bgcolor="#FFFFFF">1</td>
13

<td bgcolor="#FFFFFF"> </td>
14

<td bgcolor="#FFFFFF"> </td>
15

<td bgcolor="#FFFFFF"> </td>
16

<td bgcolor="#FFFFFF"> </td>
17

</tr>
18

<tr>
19

<td bgcolor="#FFFFFF">2</td>
20

<td bgcolor="#FFFFFF"> </td>
21

<td bgcolor="#FFFFFF"> </td>
22

<td bgcolor="#FFFFFF"> </td>
23

<td bgcolor="#FFFFFF"> </td>
24

</tr>
25

<tr>
26

<td bgcolor="#FFFFFF">3</td>
27

<td bgcolor="#FFFFFF"> </td>
28

<td bgcolor="#FFFFFF"> </td>
29

<td bgcolor="#FFFFFF"> </td>
30

<td bgcolor="#FFFFFF"> </td>
31

</tr>
32

<tr>
33

<td bgcolor="#FFFFFF">4</td>
34

<td bgcolor="#FFFFFF"> </td>
35

<td bgcolor="#FFFFFF"> </td>
36

<td bgcolor="#FFFFFF"> </td>
37

<td bgcolor="#FFFFFF"> </td>
38

</tr>
39

<tr>
40

<td bgcolor="#FFFFFF">5</td>
41

<td bgcolor="#FFFFFF"> </td>
42

<td bgcolor="#FFFFFF"> </td>
43

<td bgcolor="#FFFFFF"> </td>
44

<td bgcolor="#FFFFFF"> </td>
45

</tr>
46

<tr>
47

<td bgcolor="#FFFFFF">6</td>
48

<td bgcolor="#FFFFFF"> </td>
49

<td bgcolor="#FFFFFF"> </td>
50

<td bgcolor="#FFFFFF"> </td>
51

<td bgcolor="#FFFFFF"> </td>
52

</tr>
53

<tr>
54

<td bgcolor="#FFFFFF">7</td>
55

<td bgcolor="#FFFFFF"> </td>
56

<td bgcolor="#FFFFFF"> </td>
57

<td bgcolor="#FFFFFF"> </td>
58

<td bgcolor="#FFFFFF"> </td>
59

</tr>
60

<tr>
61

<td bgcolor="#FFFFFF">8</td>
62

<td bgcolor="#FFFFFF"> </td>
63

<td bgcolor="#FFFFFF"> </td>
64

<td bgcolor="#FFFFFF"> </td>
65

<td bgcolor="#FFFFFF"> </td>
66

</tr>
67

<tr>
68

<td bgcolor="#FFFFFF">9</td>
69

<td bgcolor="#FFFFFF"> </td>
70

<td bgcolor="#FFFFFF"> </td>
71

<td bgcolor="#FFFFFF"> </td>
72

<td bgcolor="#FFFFFF"> </td>
73

</tr>
74

<tr>
75

<td bgcolor="#FFFFFF">10</td>
76

<td bgcolor="#FFFFFF"> </td>
77

<td bgcolor="#FFFFFF"> </td>
78

<td bgcolor="#FFFFFF"> </td>
79

<td bgcolor="#FFFFFF"> </td>
80

</tr>
81

<tr>
82

<td bgcolor="#FFFFFF">11</td>
83

<td bgcolor="#FFFFFF"> </td>
84

<td bgcolor="#FFFFFF"> </td>
85

<td bgcolor="#FFFFFF"> </td>
86

<td bgcolor="#FFFFFF"> </td>
87

</tr>
88

</tbody>
89

</table>
90

<span id="spanFirst">第一页</span> <span id="spanPre">上一页</span> <span id="spanNext">下一页</span> <span id="spanLast">最后一页</span> 第<span id="spanPageNum"></span>页/共<span id="spanTotalPage"></span>页
91

</body>
92

</html>
93

<script>
94

var theTable = document.getElementById("table2");
95

var totalPage = document.getElementById("spanTotalPage");
96

var pageNum = document.getElementById("spanPageNum");
97

var spanPre = document.getElementById("spanPre");
99

var spanNext = document.getElementById("spanNext");
100

var spanFirst = document.getElementById("spanFirst");
101

var spanLast = document.getElementById("spanLast");
102

103

var numberRowsInTable = theTable.rows.length;
104

var pageSize = 3;
105

var page = 1;
106

107

//下一页
108

function next() {
109

110

hideTable();
111

112

currentRow = pageSize * page;
113

maxRow = currentRow + pageSize;
114

if ( maxRow > numberRowsInTable ) maxRow = numberRowsInTable;
115

for ( var i = currentRow; i< maxRow; i++ ) {
116

theTable.rows[i].style.display = ‘‘;
117

}
118

page++;
119

120

if ( maxRow == numberRowsInTable ) { nextText(); lastText(); }
121

showPage();
122

preLink();
123

firstLink();
124

}
125

126

//上一页
127

function pre() {
128

129

hideTable();
130

131

page--;
132

133

currentRow = pageSize * page;
134

maxRow = currentRow - pageSize;
135

if ( currentRow > numberRowsInTable ) currentRow = numberRowsInTable;
136

for ( var i = maxRow; i< currentRow; i++ ) {
137

theTable.rows[i].style.display = ‘‘;
138

}
139

140

141

if ( maxRow == 0 ) { preText(); firstText(); }
142

showPage();
143

nextLink();
144

lastLink();
145

}
146

147

//第一页
148

function first() {
149

hideTable();
150

page = 1;
151

for ( var i = 0; i<pageSize; i++ ) {
152

theTable.rows[i].style.display = ‘‘;
153

}
154

showPage();
155

156

preText();
157

nextLink();
158

lastLink();
159

}
160

161

//最后一页
162

function last() {
163

hideTable();
164

page = pageCount();
165

currentRow = pageSize * (page - 1);
166

for ( var i = currentRow; i<numberRowsInTable; i++ ) {
167

theTable.rows[i].style.display = ‘‘;
168

}
169

showPage();
170

171

preLink();
172

nextText();
173

firstLink();
174

}
175

176

function hideTable() {
177

for ( var i = 0; i<numberRowsInTable; i++ ) {
178

theTable.rows[i].style.display = ‘none‘;
179

}
180

}
181

182

function showPage() {
183

pageNum.innerHTML = page;
184

}
185

186

//总共页数
187

function pageCount() {
188

var count = 0;
189

if ( numberRowsInTable%pageSize != 0 ) count = 1;
190

return parseInt(numberRowsInTable/pageSize) + count;
191

}
192

193

//显示链接
194

function preLink() { spanPre.innerHTML = "<a href=‘javascript:pre();‘>上一页</a>"; }
195

function preText() { spanPre.innerHTML = "上一页"; }
196

197

function nextLink() { spanNext.innerHTML = "<a href=‘javascript:next();‘>下一页</a>"; }
198

function nextText() { spanNext.innerHTML = "下一页"; }
199

200

function firstLink() { spanFirst.innerHTML = "<a href=‘javascript:first();‘>第一页</a>"; }
201

function firstText() { spanFirst.innerHTML = "第一页"; }
202

203

function lastLink() { spanLast.innerHTML = "<a href=‘javascript:last();‘>最后一页</a>"; }
204

function lastText() { spanLast.innerHTML = "最后一页"; }
205

206

//隐藏表格
207

function hide() {
208

for ( var i = pageSize; i<numberRowsInTable; i++ ) {
209

theTable.rows[i].style.display = ‘none‘;
210

}
211

212

totalPage.innerHTML = pageCount();
213

pageNum.innerHTML = ‘1‘;
214

215

nextLink();
216

lastLink();
217

}
218

219

hide();
220

</script>

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。