蝸牛的JAVA外殼

┎Running Snail┒ ┖ -------------- ┚

:: 管理

13 Posts :: 0 Stories :: 10 Comments :: 0 Trackbacks

由于公司的業務需要，所以做了一個HTML表格分頁，跟數據庫無關。

<!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>

posted on 2007-04-22 12:33 會跑的蝸牛閱讀(6159) 評論(1) 編輯收藏所屬分類: Javascript

Feedback

# re: [原創]HTML表格分頁 2007-08-21 16:53 小帆

謝謝樓主,挺不錯的. 回復更多評論

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: JQuery中Ajax跨域解決方案讓彈出窗口的大小隨圖片變化而變化 DIV居中 [轉]常用的JavaScript驗證正則表達式 [原創]HTML表格分頁 [原創]截取字符串的一定長度

蝸牛的JAVA外殼

常用鏈接

留言簿(1)

我參與的團隊

隨筆分類

隨筆檔案

搜索

最新評論

閱讀排行榜

評論排行榜

Feedback