jQuery实现页面级分页

shaq34

浏览: 22610 次
性别:
来自: 武汉

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (14)

社区版块

存档分类

jQuery CSS HTML

这是一个页面级的分页，先获取页面表格，然后对表格进行分页。
需要页面加载完成才能获得表格，所以js代码应该在表格最后。
我的方法是把显示按钮的层与js代码写到自定义标签里。按钮当然是放在表格之后
提供下载的例子是可以直接演示的。

表格部分

<table>
			<thead>
				<tr>
					<th width="4%">
						&nbsp;
					</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>页&nbsp;&nbsp; 当前第
			<span id="index"></span>页&nbsp;&nbsp;
			<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>