<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; 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 onclick="doFirst();">首页</span><span onclick="doUp();">上一页</span> <span onclick="doNext();">下一页</span><span onclick="doLast();">尾页</span> <input id="goPage" style="20px"/><span onclick="doGo();">GO</span> <!-- <input type="button" onclick="doFirst();" value="首页"></input><input type="button" onclick="doUp();" value="上一页"></input> <input type="button" onclick="doNext();" value="下一页"></input><input type="button" onclick="doLast();" value="尾页"></input> <input id="goPage" style="20px"/><input type="button" onclick="doGo();" value="GO"></input> </div> --> <a href="#" onclick="doFirst();" >首页</a> <a href="#" onclick="doUp();" >上一页</a> <a href="#" onclick="doNext();" >下一页</a> <a href="#" onclick="doLast();" >尾页</a> <input id="goPage" style="20px"/><a href="#" onclick="doGo();" >GO</a> </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); } } //首页 function doFirst(){ pageModel.cunPage=1; contentDiv.innerHTML=doShow(pageModel.cunPage,stus); } //上一页 function doUp(){ if(pageModel.cunPage<=1){ return ; } pageModel.cunPage--; contentDiv.innerHTML=doShow(pageModel.cunPage,stus); } //下一页 function doNext(){ if(pageModel.cunPage>=pageModel.totalPage()){ return ; } pageModel.cunPage++; contentDiv.innerHTML=doShow(pageModel.cunPage,stus); } //最后一页 function doLast(){ pageModel.cunPage=pageModel.totalPage(); contentDiv.innerHTML=doShow(pageModel.cunPage,stus); } //跳转 function doGo(){ 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; 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 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 onclick="doFirst();">首页</span><span onclick="doUp();">上一页</span> 50 <span onclick="doNext();">下一页</span><span onclick="doLast();">尾页</span> 51 <input id="goPage" style="20px"/><span onclick="doGo();">GO</span> 52 53 <!-- 54 <input type="button" onclick="doFirst();" value="首页"></input><input type="button" onclick="doUp();" value="上一页"></input> 55 <input type="button" onclick="doNext();" value="下一页"></input><input type="button" onclick="doLast();" value="尾页"></input> 56 <input id="goPage" style="20px"/><input type="button" onclick="doGo();" value="GO"></input> 57 </div> 58 --> 59 <a href="#" onclick="doFirst();" >首页</a> 60 <a href="#" onclick="doUp();" >上一页</a> 61 <a href="#" onclick="doNext();" >下一页</a> 62 <a href="#" onclick="doLast();" >尾页</a> 63 <input id="goPage" style="20px"/><a href="#" onclick="doGo();" >GO</a> 64 </body> 65 <script> 66 var stus=[]; 67 function Student(num,sname,age,sex){ 68 this.num=num; 69 this.sname=sname; 70 this.age=age; 71 this.sex=sex; 72 this.toString=function(){ 73 return num+"-"+sname+"-"+age+"-"+sex; 74 } 75 } 76 //初始化 77 function init(){ 78 //多个学生信息装入数组中 79 for(var i=0;i<55;i++){ 80 stus.push(new Student(10000+i,'zs'+i,20+i,'男')); 81 } 82 } 83 </script> 84 85 <script> 86 var contentDiv=document.getElementById("contentDiv"); 87 /** 88 数据源 显示位置 每页显示几个 当前页 89 可以把下面方法 封装到分页模型,实现通用性 90 91 如果是table,如何实现分页功能? 92 */ 93 //分页模型 94 function PageModel(){ 95 this.cunPage;//当前页 96 this.pageContent;//一页显示多少个 97 this.totalNum;//总记录数 98 this.totalPage=function (){ 99 return Math.ceil(this.totalNum/this.pageContent); 100 } 101 102 } 103 104 //首页 105 function doFirst(){ 106 pageModel.cunPage=1; 107 contentDiv.innerHTML=doShow(pageModel.cunPage,stus); 108 } 109 110 //上一页 111 function doUp(){ 112 if(pageModel.cunPage<=1){ 113 return ; 114 } 115 pageModel.cunPage--; 116 contentDiv.innerHTML=doShow(pageModel.cunPage,stus); 117 } 118 119 //下一页 120 function doNext(){ 121 if(pageModel.cunPage>=pageModel.totalPage()){ 122 return ; 123 } 124 pageModel.cunPage++; 125 contentDiv.innerHTML=doShow(pageModel.cunPage,stus); 126 } 127 128 129 //最后一页 130 function doLast(){ 131 pageModel.cunPage=pageModel.totalPage(); 132 contentDiv.innerHTML=doShow(pageModel.cunPage,stus); 133 } 134 135 //跳转 136 function doGo(){ 137 var goPage =parseInt(document.getElementById("goPage").value); 138 if(goPage<1||goPage>pageModel.totalPage()){ 139 return ; 140 } 141 pageModel.cunPage=parseInt(goPage); 142 contentDiv.innerHTML=doShow(pageModel.cunPage,stus); 143 } 144 145 //插入显示 146 function doShow(CurrentPage,stus){ 147 var start=(CurrentPage-1)*pageModel.pageContent; 148 var end=CurrentPage*pageModel.pageContent; 149 var s=""; 150 for(var i=start;i<end;i++){ 151 if(stus[i]!=null){ 152 s+='<span>'+stus[i].num+'</span><span>'+stus[i].sname+'</span><span>' 153 +stus[i].age+'</span><span>'+stus[i].sex+'</span><br/>'; 154 } 155 } 156 return s; 157 } 158 </script> 159 <script> 160 init(); 161 var pageModel=new PageModel(); 162 pageModel.pageContent=10; 163 pageModel.totalNum=stus.length; 164 doFirst(); 165 </script> 166 </html>