这是一个页面级的分页,先获取页面表格,然后对表格进行分页。
需要页面加载完成才能获得表格,所以js代码应该在表格最后。
我的方法是把显示按钮的层与js代码写到自定义标签里。按钮当然是放在表格之后
提供下载的例子是可以直接演示的。
表格部分
js部分
需要页面加载完成才能获得表格,所以js代码应该在表格最后。
我的方法是把显示按钮的层与js代码写到自定义标签里。按钮当然是放在表格之后
提供下载的例子是可以直接演示的。
表格部分
<table>
<thead>
<tr>
<th width="4%">
</th>
<th width="5%">
EMPNO
</th>
<th width="12%">
ENAME
</th>
<th width="12%">
JOB
</th>
<th width="19%">
MGR
</th>
<th width="19%">
HIREDATE
</th>
<th width="12%">
SAL
</th>
<th width="12%">
COMM
</th>
<th width="4%">
DEPTNO
</th>
</tr>
</thead>
<tbody id="tbody1" style="display: none;">
<TR>
<TD>
1
</TD>
<TD>
7369
</TD>
<TD>
SMITH
</TD>
<TD>
CLERK
</TD>
<TD>
7902
</TD>
<TD>
1980-12-17
</TD>
<TD>
800.00
</TD>
<TD></TD>
<TD>
20
</TD>
</TR>
<TR>
<TD>
2
</TD>
<TD>
7499
</TD>
<TD>
ALLEN
</TD>
<TD>
SALESMAN
</TD>
<TD>
7698
</TD>
<TD>
1981-2-20
</TD>
<TD>
1600.00
</TD>
<TD>
300.00
</TD>
<TD>
30
</TD>
</TR>
<TR>
<TD>
3
</TD>
<TD>
7521
</TD>
<TD>
WARD
</TD>
<TD>
SALESMAN
</TD>
<TD>
7698
</TD>
<TD>
1981-2-22
</TD>
<TD>
1250.00
</TD>
<TD>
500.00
</TD>
<TD>
30
</TD>
</TR>
<TR>
<TD>
4
</TD>
<TD>
7566
</TD>
<TD>
JONES
</TD>
<TD>
MANAGER
</TD>
<TD>
7839
</TD>
<TD>
1981-4-2
</TD>
<TD>
2975.00
</TD>
<TD></TD>
<TD>
20
</TD>
</TR>
<TR>
<TD>
5
</TD>
<TD>
7654
</TD>
<TD>
MARTIN
</TD>
<TD>
SALESMAN
</TD>
<TD>
7698
</TD>
<TD>
1981-9-28
</TD>
<TD>
1250.00
</TD>
<TD>
1400.00
</TD>
<TD>
30
</TD>
</TR>
<TR>
<TD>
6
</TD>
<TD>
7698
</TD>
<TD>
BLAKE
</TD>
<TD>
MANAGER
</TD>
<TD>
7839
</TD>
<TD>
1981-5-1
</TD>
<TD>
2850.00
</TD>
<TD></TD>
<TD>
30
</TD>
</TR>
<TR>
<TD>
7
</TD>
<TD>
7782
</TD>
<TD>
CLARK
</TD>
<TD>
MANAGER
</TD>
<TD>
7839
</TD>
<TD>
1981-6-9
</TD>
<TD>
2450.00
</TD>
<TD></TD>
<TD>
10
</TD>
</TR>
<TR>
<TD>
8
</TD>
<TD>
7788
</TD>
<TD>
SCOTT
</TD>
<TD>
ANALYST
</TD>
<TD>
7566
</TD>
<TD>
1987-4-19
</TD>
<TD>
3000.00
</TD>
<TD></TD>
<TD>
20
</TD>
</TR>
<TR>
<TD>
9
</TD>
<TD>
7839
</TD>
<TD>
KING
</TD>
<TD>
PRESIDENT
</TD>
<TD>
1981-11-17
</TD>
<TD>
5000.00
</TD>
<TD></TD>
<TD>
10
</TD>
</TR>
<TR>
<TD>
10
</TD>
<TD>
7844
</TD>
<TD>
TURNER
</TD>
<TD>
SALESMAN
</TD>
<TD>
7698
</TD>
<TD>
1981-9-8
</TD>
<TD>
1500.00
</TD>
<TD>
0.00
</TD>
<TD>
30
</TD>
</TR>
<TR>
<TD>
11
</TD>
<TD>
7876
</TD>
<TD>
ADAMS
</TD>
<TD>
CLERK
</TD>
<TD>
7788
</TD>
<TD>
1987-5-23
</TD>
<TD>
1100.00
</TD>
<TD></TD>
<TD>
20
</TD>
</TR>
<TR>
<TD>
12
</TD>
<TD>
7900
</TD>
<TD>
JAMES
</TD>
<TD>
CLERK
</TD>
<TD>
7698
</TD>
<TD>
1981-12-3
</TD>
<TD>
950.00
</TD>
<TD></TD>
<TD>
30
</TD>
</TR>
<TR>
<TD>
13
</TD>
<TD>
7902
</TD>
<TD>
FORD
</TD>
<TD>
ANALYST
</TD>
<TD>
7566
</TD>
<TD>
1981-12-3
</TD>
<TD>
3000.00
</TD>
<TD></TD>
<TD>
20
</TD>
</TR>
<TR>
<TD>
14
</TD>
<TD>
7934
</TD>
<TD>
MILLER
</TD>
<TD>
CLERK
</TD>
<TD>
7782
</TD>
<TD>
1982-1-23
</TD>
<TD>
1300.00
</TD>
<TD></TD>
<TD>
10
</TD>
</TR>
</tbody>
</table>
<br />
<div style="float: right;">
共
<span id="count"></span>页 当前第
<span id="index"></span>页
<input type="text" id="goText" size="3">
<input type="button" id="goButton" value="GO">
<input type="button" id="first" value="第一页">
<input type="button" id="previous" value="上一页">
<input type="button" id="next" value="下一页">
<input type="button" id="last" value="最后页">
</div>
js部分
<script type="text/javascript">
//每页显示记录数
var pageSize = 5;
var content = $("#tbody1 > tr");
//总记录数
var recordCount = content.length;
//总页数
var pageCount = parseInt((recordCount + pageSize - 1) / pageSize);
//显示总记录数
$("#count").html(pageCount);
function showRow(pageNum){
var text="";
var pageStart = (pageNum - 1) * pageSize;
var pageEnd = pageStart + pageSize;
//结束记录数大于总记录数,最后一页时
if(pageEnd > recordCount){
pageEnd = recordCount;
}
for(i=pageStart;i<pageEnd;i++){
text += "<tr>"+content[i].innerHTML+"</tr>";
}
$("tbody").html(text);
//显示当前第几页
$("#index").html(pageNum);
}
$(function(){
//当前页数标示,初始为1
var pageIndex = 1;
showRow(pageIndex);
//页面舒适化时隐藏,完成分页后再显示
$("#tbody1").css("display","");
//跳转到指定页
$("#goButton").click(function(){
var obj = $("#goText")
var text = obj.val();
if(isNaN(text)){
alert("请输入一个数字!");
obj.select();
obj.focus();
return false;
}else{
var pageNum = parseInt(text);
if(pageNum < 1 || pageNum > pageCount){
alert("超出页码范围!");
obj.select();
obj.focus();
return false;
}else{
obj.select();
showRow(pageNum);
}
}
});
//首页
$("#first").click(function(){
pageIndex = 1;
showRow(pageIndex);
});
//最后一页
$("#last").click(function(){
pageIndex = pageCount;
showRow(pageIndex);
});
//上一页
$("#previous").click(function(){
if(pageIndex == 1){
alert("当前为第一页!");
return false;
}else{
pageIndex --;
}
showRow(pageIndex);
});
//下一页
$("#next").click(function(){
if(pageIndex == pageCount){
alert("当前最后一页!");
return false;
}else{
pageIndex ++;
}
showRow(pageIndex);
});
});
</script>