![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<html> <head> <title>分页</title> <style> #titleDiv{ width:500px; background-color:silver; margin-left:300px; /***/margin-top:100px; } #titleDiv span{ margin-left:50px; } #contentDiv{ width:500px; background-color:gray; margin-left:300px; } #contentDiv span{ /**display:inline; width:100px;*/ margin-left:50px; } #pageDiv{ width:500px; margin-left:420px; margin-top:20px; /**background-color:gold;*/ } #pageDiv span{ margin-left:10px; } </style> </head> <body> <div id="titleDiv"> <span>学号</span><span>姓名</span><span>年龄</span><span>性别</span><br/> </div> <div id="contentDiv"> </div> <div id="pageDiv"> <!--<span οnclick="doFirst();">首页</span><span οnclick="doUp();">上一页</span> <span οnclick="doNext();">下一页</span><span οnclick="doLast();">尾页</span> <input id="goPage" style="width:20px"/><span οnclick="doGo();">GO</span> <!-- <input type="button" οnclick="doFirst();" value="首页"></input><input type="button" οnclick="doUp();" value="上一页"></input> <input type="button" οnclick="doNext();" value="下一页"></input><input type="button" οnclick="doLast();" value="尾页"></input> <input id="goPage" style="width:20px"/><input type="button" οnclick="doGo();" value="GO"></input> </div> --> <a href="#" onclick="pageModel.doFirst();" >首页</a> <a href="#" onclick="pageModel.doUp();" >上一页</a> <a href="#" onclick="pageModel.doNext();" >下一页</a> <a href="#" onclick="pageModel.doLast();" >尾页</a> <input id="goPage" style="width:20px"/><a href="#" onclick="pageModel.doGo();" >GO</a> <!-- 有时候,页面打开后,source里没有元素内容,是因为当前的页面仍处于编辑状态,未保存,保存后,会正常显示 --> </body> <script> var stus=[]; function Student(num,sname,age,sex){ this.num=num; this.sname=sname; this.age=age; this.sex=sex; this.toString=function(){ return num+"-"+sname+"-"+age+"-"+sex; } } //初始化 function init(){ //多个学生信息装入数组中 for(var i=0;i<55;i++){ stus.push(new Student(10000+i,'zs'+i,20+i,'男')); } } </script> <script> var contentDiv=document.getElementById("contentDiv"); /** 数据源 显示位置 每页显示几个 当前页 可以把下面方法 封装到分页模型,实现通用性 如果是table,如何实现分页功能? */ //分页模型 function PageModel(){ this.cunPage;//当前页 this.pageContent;//一页显示多少个 this.totalNum;//总记录数 this.totalPage=function (){ return Math.ceil(this.totalNum/this.pageContent); } this.doFirst=function (){ //首页 pageModel.cunPage=1; contentDiv.innerHTML=doShow(pageModel.cunPage,stus); } this.doUp=function (){ //上一页 if(pageModel.cunPage<=1){ return ; } pageModel.cunPage--; contentDiv.innerHTML=doShow(pageModel.cunPage,stus); } this.doNext=function (){ //下一页 if(pageModel.cunPage>=pageModel.totalPage()){ return ; } pageModel.cunPage++; contentDiv.innerHTML=doShow(pageModel.cunPage,stus); } this.doLast=function (){ //最后一页 pageModel.cunPage=pageModel.totalPage(); contentDiv.innerHTML=doShow(pageModel.cunPage,stus); } this.doGo=function (){ //跳转 var goPage =parseInt(document.getElementById("goPage").value); if(goPage<1||goPage>pageModel.totalPage()){ return ; } pageModel.cunPage=parseInt(goPage); contentDiv.innerHTML=doShow(pageModel.cunPage,stus); } } //插入显示 function doShow(CurrentPage,stus){ var start=(CurrentPage-1)*pageModel.pageContent; var end=CurrentPage*pageModel.pageContent; var s=""; for(var i=start;i<end;i++){ if(stus[i]!=null){ s+='<span>'+stus[i].num+'</span><span>'+stus[i].sname+'</span><span>' +stus[i].age+'</span><span>'+stus[i].sex+'</span><br/>'; } } return s; } </script> <script> init(); var pageModel=new PageModel(); pageModel.pageContent=10; pageModel.totalNum=stus.length; pageModel.doFirst(); </script> </html>
1 <html> 2 <head> 3 <title>分页</title> 4 <style> 5 #titleDiv{ 6 width:500px; 7 background-color:silver; 8 margin-left:300px; 9 /***/margin-top:100px; 10 } 11 #titleDiv span{ 12 margin-left:50px; 13 } 14 15 16 #contentDiv{ 17 width:500px; 18 background-color:gray; 19 margin-left:300px; 20 21 } 22 #contentDiv span{ 23 /**display:inline; 24 width:100px;*/ 25 margin-left:50px; 26 } 27 #pageDiv{ 28 width:500px; 29 margin-left:420px; 30 margin-top:20px; 31 /**background-color:gold;*/ 32 } 33 34 #pageDiv span{ 35 margin-left:10px; 36 } 37 </style> 38 </head> 39 <body> 40 <div id="titleDiv"> 41 <span>学号</span><span>姓名</span><span>年龄</span><span>性别</span><br/> 42 </div> 43 44 <div id="contentDiv"> 45 46 </div> 47 48 <div id="pageDiv"> 49 <!--<span οnclick="doFirst();">首页</span><span οnclick="doUp();">上一页</span> 50 <span οnclick="doNext();">下一页</span><span οnclick="doLast();">尾页</span> 51 <input id="goPage" style="width:20px"/><span οnclick="doGo();">GO</span> 52 53 <!-- 54 <input type="button" οnclick="doFirst();" value="首页"></input><input type="button" οnclick="doUp();" value="上一页"></input> 55 <input type="button" οnclick="doNext();" value="下一页"></input><input type="button" οnclick="doLast();" value="尾页"></input> 56 <input id="goPage" style="width:20px"/><input type="button" οnclick="doGo();" value="GO"></input> 57 </div> 58 --> 59 <a href="#" onclick="pageModel.doFirst();" >首页</a> 60 <a href="#" onclick="pageModel.doUp();" >上一页</a> 61 <a href="#" onclick="pageModel.doNext();" >下一页</a> 62 <a href="#" onclick="pageModel.doLast();" >尾页</a> 63 <input id="goPage" style="width:20px"/><a href="#" onclick="pageModel.doGo();" >GO</a> 64 <!-- 65 有时候,页面打开后,source里没有元素内容,是因为当前的页面仍处于编辑状态,未保存,保存后,会正常显示 66 --> 67 </body> 68 <script> 69 var stus=[]; 70 function Student(num,sname,age,sex){ 71 this.num=num; 72 this.sname=sname; 73 this.age=age; 74 this.sex=sex; 75 this.toString=function(){ 76 return num+"-"+sname+"-"+age+"-"+sex; 77 } 78 } 79 //初始化 80 function init(){ 81 //多个学生信息装入数组中 82 for(var i=0;i<55;i++){ 83 stus.push(new Student(10000+i,'zs'+i,20+i,'男')); 84 } 85 } 86 </script> 87 88 <script> 89 var contentDiv=document.getElementById("contentDiv"); 90 /** 91 数据源 显示位置 每页显示几个 当前页 92 可以把下面方法 封装到分页模型,实现通用性 93 94 如果是table,如何实现分页功能? 95 */ 96 //分页模型 97 function PageModel(){ 98 this.cunPage;//当前页 99 this.pageContent;//一页显示多少个 100 this.totalNum;//总记录数 101 102 this.totalPage=function (){ 103 return Math.ceil(this.totalNum/this.pageContent); 104 } 105 106 this.doFirst=function (){ //首页 107 pageModel.cunPage=1; 108 contentDiv.innerHTML=doShow(pageModel.cunPage,stus); 109 } 110 111 this.doUp=function (){ //上一页 112 if(pageModel.cunPage<=1){ 113 return ; 114 } 115 pageModel.cunPage--; 116 contentDiv.innerHTML=doShow(pageModel.cunPage,stus); 117 } 118 119 this.doNext=function (){ //下一页 120 if(pageModel.cunPage>=pageModel.totalPage()){ 121 return ; 122 } 123 pageModel.cunPage++; 124 contentDiv.innerHTML=doShow(pageModel.cunPage,stus); 125 } 126 127 this.doLast=function (){ //最后一页 128 pageModel.cunPage=pageModel.totalPage(); 129 contentDiv.innerHTML=doShow(pageModel.cunPage,stus); 130 } 131 132 this.doGo=function (){ //跳转 133 var goPage =parseInt(document.getElementById("goPage").value); 134 if(goPage<1||goPage>pageModel.totalPage()){ 135 return ; 136 } 137 pageModel.cunPage=parseInt(goPage); 138 contentDiv.innerHTML=doShow(pageModel.cunPage,stus); 139 } 140 141 } 142 143 //插入显示 144 function doShow(CurrentPage,stus){ 145 var start=(CurrentPage-1)*pageModel.pageContent; 146 var end=CurrentPage*pageModel.pageContent; 147 var s=""; 148 for(var i=start;i<end;i++){ 149 if(stus[i]!=null){ 150 s+='<span>'+stus[i].num+'</span><span>'+stus[i].sname+'</span><span>' 151 +stus[i].age+'</span><span>'+stus[i].sex+'</span><br/>'; 152 } 153 } 154 return s; 155 } 156 </script> 157 <script> 158 init(); 159 var pageModel=new PageModel(); 160 pageModel.pageContent=10; 161 pageModel.totalNum=stus.length; 162 pageModel.doFirst(); 163 </script> 164 </html>