这是一个页面级的分页，先获取页面表格，然后对表格进行分页。
需要页面加载完成才能获得表格，所以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>
相关资源：jquery实现分页组件
