div+css+javascript循环分页表格 - 飞鸟42

是用js脚本写的分页代码，符合web标准。

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

*{ margin:0; padding:0; list-style:none; text-align:center;}
10

.clear{ clear:both; font:Verdana, Geneva, sans-serif 0px/0px;}
11

ul#pageContent { margin-left:1px; margin-top:1px; }
12

ul#pageContent li { float:left; height:23px; border:1px solid #cfdae8; margin-left:-1px; margin-top:-1px; white-space:nowrap;}
13

#pages{ color:#666; text-align:center; }
16

#pages span{ border:1px solid #ddd; line-height:1.2; margin:0 3px; padding:3px 4px; color:#ccc }
17

#pages span a{ text-decoration:none; color:#333333}
18

#pages span a:hover{}
19

#pages strong{ color:#FF0000; padding:0 3px; font-weight:bold}
20

</style>
22

</head>
23

<body>
24

<ul id="pageContent">
25

<li>科研处关于科研成果登记的通知1</li>
26

<li>关于清除炒股聊天等软件的通知2</li>
27

<li>科研处关于科研成果登记的通知3</li>
28

<li>关于清除炒股聊天等软件的通知4</li>
29

<li>科研处关于科研成果登记的通知5</li>
30

<li>关于清除炒股聊天等软件的通知6</li>
31

<li>科研处关于科研成果登记的通知7</li>
32

<li>关于清除炒股聊天等软件的通知8</li>
33

<li>科研处关于科研成果登记的通知9</li>
34

<li>关于清除炒股聊天等软件的通知10</li>
35

<li>科研处关于科研成果登记的通知11</li>
36

<li>关于清除炒股聊天等软件的通知12</li>
37

<li>科研处关于科研成果登记的通知13</li>
38

<li>关于清除炒股聊天等软件的通知14</li>
39

<li>科研处关于科研成果登记的通知15</li>
40

<li>关于清除炒股聊天等软件的通知16</li>
41

<li>科研处关于科研成果登记的通知17</li>
42

<li>关于清除炒股聊天等软件的通知18</li>
43

<li>科研处关于科研成果登记的通知19</li>
44

<li>关于清除炒股聊天等软件的通知20</li>
45

<li>科研处关于科研成果登记的通知21</li>
46

<li>关于清除炒股聊天等软件的通知22</li>
47

<li>科研处关于科研成果登记的通知23</li>
48

<li>关于清除炒股聊天等软件的通知24</li>
49

<li>科研处关于科研成果登记的通知25</li>
50

<li>关于清除炒股聊天等软件的通知26</li>
51

<li>科研处关于科研成果登记的通知27</li>
52

<li>关于清除炒股聊天等软件的通知28</li>
53

<li>科研处关于科研成果登记的通知29</li>
54

<li>关于清除炒股聊天等软件的通知30</li>
55

<li>科研处关于科研成果登记的通知31</li>
56

<li>关于清除炒股聊天等软件的通知32</li>
57

<li>科研处关于科研成果登记的通知33</li>
58

<li>关于清除炒股聊天等软件的通知34</li>
59

<li>科研处关于科研成果登记的通知35</li>
60

<li>关于清除炒股聊天等软件的通知36</li>
61

<li>科研处关于科研成果登记的通知37</li>
62

<li>关于清除炒股聊天等软件的通知38</li>
63

<li>科研处关于科研成果登记的通知39</li>
64

<li>关于清除炒股聊天等软件的通知40</li>
65

</ul>
66

<div class="clear"> </div>
67

<div id="pages"> <span id="spanFirst">首页</span> <span id="spanPre">上一页</span> <span id="spanNext">下一页</span> <span id="spanLast">尾页</span> 第<strong id="spanPageNum"></strong>页/共<strong id="spanTotalPage"></strong>页 </div>
68

var theUL = document.getElementById("pageContent");
70

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

var pageNum = document.getElementById("spanPageNum"); //获取当前页<span>
72

var spanPre = document.getElementById("spanPre"); //获取上一页<span>
73

var spanNext = document.getElementById("spanNext"); //获取下一页<span>
74

var spanFirst = document.getElementById("spanFirst"); //获取第一页<span>
75

var spanLast = document.getElementById("spanLast"); //获取最后一页<span>
76

var numberRowsInTable = theUL.getElementsByTagName("li").length; //记录总条数
77

var pageSize = 8; //每页显示的记录条数
78

var page = 1; //当前页，默认第一页
79

//下一页
81

function next(){
82

hideTable();
83

currentRow = pageSize * page;
84

maxRow = currentRow + pageSize;
85

if ( maxRow > numberRowsInTable ) maxRow = numberRowsInTable;
86

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

theUL.getElementsByTagName("li")[i].style.display = '';
88

}
89

page++;
90

if ( maxRow == numberRowsInTable ) {
91

nextText();
92

lastText();
93

}
94

showPage();
95

preLink();
96

firstLink();
97

}
98

//上一页
100

function pre(){
101

hideTable();
102

page--;
103

currentRow = pageSize * page;
104

maxRow = currentRow - pageSize;
105

if ( currentRow > numberRowsInTable ) currentRow = numberRowsInTable;
106

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

theUL.getElementsByTagName("li")[i].style.display = '';
108

}
109

if ( maxRow == 0 ){
110

preText();
111

firstText();
112

}
113

showPage();
114

nextLink();
115

lastLink();
116

}
117

118

//第一页
119

function first(){
120

hideTable();
121

page = 1;
122

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

theUL.getElementsByTagName("li")[i].style.display = '';
124

}
125

showPage();
126

firstText();
127

preText();
128

nextLink();
129

lastLink();
130

}
131

132

//最后一页
133

function last(){
134

hideTable();
135

page = pageCount();
136

currentRow = pageSize * (page - 1);
137

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

theUL.getElementsByTagName("li")[i].style.display = '';
139

}
140

showPage();
141

preLink();
142

nextText();
143

firstLink();
144

lastText();
145

}
146

147

function hideTable(){
148

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

theUL.getElementsByTagName("li")[i].style.display = 'none';
150

}
151

}
152

153

function showPage(){
154

pageNum.innerHTML = page;
155

}
156

157

//总共页数
158

function pageCount(){
159

return Math.ceil(numberRowsInTable/pageSize);
160

}
161

//显示链接
162

function preLink(){
163

spanPre.innerHTML = "<a href='javascript:pre();'>上一页</a>";
164

}
165

function preText(){
166

spanPre.innerHTML = "上一页";
167

}
168

function nextLink(){
169

spanNext.innerHTML = "<a href='javascript:next();'>下一页</a>";
170

}
171

function nextText(){
172

spanNext.innerHTML = "下一页";
173

}
174

function firstLink(){
175

spanFirst.innerHTML = "<a href='javascript:first();'>首页</a>";
176

}
177

function firstText(){
178

spanFirst.innerHTML = "首页";
179

}
180

function lastLink(){
181

spanLast.innerHTML = "<a href='javascript:last();'>末页</a>";
182

}
183

function lastText(){
184

spanLast.innerHTML = "末页";
185

}
186

187

//隐藏
188

function hide(){
189

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

theUL.getElementsByTagName("li")[i].style.display = 'none';
191

}
192

totalPage.innerHTML = pageCount();
193

pageNum.innerHTML = '1';
194

nextLink();
195

lastLink();
196

}
197

hide();
198

</script>
199

200

201

202

203

<br /></body>
204

</html>

posted on 2009-10-15 14:47 飞鸟42 阅读(1010) 评论(0) 编辑收藏举报

刷新页面返回顶部