div+css+javascript循环分页表格_html/css



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

1
2 < html xmlns = " http://www.w3.org/1999/xhtml " >
3 < head >
4 < meta http - equiv = " Content-Type " content = " text/html; charset=utf-8 " / >
5 < meta name = " author " content = " Chomo " / >
6 < link rel = " start " href = " http://www.14px.com " title = " Home " / >
7 < title >? б - ????< / title>
8 < style type = " text/css " >
9 * { margin:0; padding:0; list-style:none; text-align:center;}
10 .clear { clear:both; font:Verdana, Geneva, sans-serif 0px/0px;}
11ul#pageContent { margin-left:1px; margin-top:1px; }
12ul#pageContent li { float:left; height:23px; border:1px solid #cfdae8; margin-left:-1px; margin-top:-1px; white-space:nowrap;}
13
14
15#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
21
22
23
24
25

科研处关于科研成果登记的通知1

26

关于清除炒股聊天等软件的通知2

27

科研处关于科研成果登记的通知3

28

关于清除炒股聊天等软件的通知4

29

科研处关于科研成果登记的通知5

30

关于清除炒股聊天等软件的通知6

31

科研处关于科研成果登记的通知7

32

关于清除炒股聊天等软件的通知8

33

科研处关于科研成果登记的通知9

34

关于清除炒股聊天等软件的通知10

35

科研处关于科研成果登记的通知11

36

关于清除炒股聊天等软件的通知12

37

科研处关于科研成果登记的通知13

38

关于清除炒股聊天等软件的通知14

39

科研处关于科研成果登记的通知15

40

关于清除炒股聊天等软件的通知16

41

科研处关于科研成果登记的通知17

42

关于清除炒股聊天等软件的通知18

43

科研处关于科研成果登记的通知19

44

关于清除炒股聊天等软件的通知20

45

科研处关于科研成果登记的通知21

46

关于清除炒股聊天等软件的通知22

47

科研处关于科研成果登记的通知23

48

关于清除炒股聊天等软件的通知24

49

科研处关于科研成果登记的通知25

50

关于清除炒股聊天等软件的通知26

51

科研处关于科研成果登记的通知27

52

关于清除炒股聊天等软件的通知28

53

科研处关于科研成果登记的通知29

54

关于清除炒股聊天等软件的通知30

55

科研处关于科研成果登记的通知31

56

关于清除炒股聊天等软件的通知32

57

科研处关于科研成果登记的通知33

58

关于清除炒股聊天等软件的通知34

59

科研处关于科研成果登记的通知35

60

关于清除炒股聊天等软件的通知36

61

科研处关于科研成果登记的通知37

62

关于清除炒股聊天等软件的通知38

63

科研处关于科研成果登记的通知39

关于清除炒股聊天等软件的通知40

65
66
67 首页 上一页 下一页 尾页 第页/共页
68
69 var theUL = document.getElementById("pageContent");
70 var totalPage = document.getElementById("spanTotalPage");
71 var pageNum = document.getElementById("spanPageNum"); //获取当前页
72 var spanPre = document.getElementById("spanPre"); //获取上一页
73 var spanNext = document.getElementById("spanNext"); //获取下一页
74 var spanFirst = document.getElementById("spanFirst"); //获取第一页
75 var spanLast = document.getElementById("spanLast"); //获取最后一页
76 var numberRowsInTable = theUL.getElementsByTagName("li").length; //记录总条数
77 var pageSize = 8; //每页显示的记录条数
78 var page = 1; //当前页，默认第一页
79
80 //下一页
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++ ){
87theUL.getElementsByTagName("li")[i].style.display = '';
88 }
page++;
90 if ( maxRow == numberRowsInTable ) {
91 nextText();
92 lastText();
93 }
94 showPage();
95 preLink();
96 firstLink();
97 }
98
99 //上一页
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++ ){
107theUL.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; i123theUL.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; i138theUL.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; i149theUL.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 = "上一页";
1 }
165 function preText(){
166 spanPre.innerHTML = "上一页";
167 }
168 function nextLink(){
169 spanNext.innerHTML = "下一页";
170 }
171 function nextText(){
172 spanNext.innerHTML = "下一页";
173 }
174 function firstLink(){
175 spanFirst.innerHTML = "首页";
176 }
177 function firstText(){
178 spanFirst.innerHTML = "首页";
179 }
180 function lastLink(){
181 spanLast.innerHTML = "末页";
182 }
183 function lastText(){
184 spanLast.innerHTML = "末页";
185 }
186
187 //隐藏
188 function hide(){
1 for ( var i = pageSize; i190theUL.getElementsByTagName("li")[i].style.display = 'none';
191 }
192 totalPage.innerHTML = pageCount();
193 pageNum.innerHTML = '1';
194 nextLink();
195 lastLink();
196 }
197 hide();
198
199
200
201
202
203

204