<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{ margin-left:54px; } #pageDiv{ width:500px; margin-left:420px; margin-top:20px; } #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="doLast()">上一页</span> <span onclick="doNext();">下一页</span><span onclick="doEnd()">尾页</span> <span>第<span id="num"></span>页</span> <input type="text" style="20px" id="go"/><span onclick="Go()">GO</span> </div> </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(1000+i,'zs'+i,20+i,'男')); } } </script> <script> init(); </script> <script> var contentDiv=document.getElementById("contentDiv"); //获取表示第几页的id,用于插入是第几页 var Num=document.getElementById("num"); function PageModel(){ this.cunPage;//当前页 this.pageContent;//一页显示多少个 this.totalNum;//总记录数 this.totalPage=this.totalNum%this.pageContent>0?(this.totalNum/this.pageContent+1):(this.totalNum/this.pageContent);//总页数 } var pageModel=new PageModel(); //每页记录数 pageModel.pageContent=10; //总记录数 var totalNum=stus.length; //总页数 var totalPage=totalNum%pageModel.pageContent>0?Math.ceil(totalNum/pageModel.pageContent):Math.floor(totalNum/pageModel.pageContent); //首页 function doFirst(){ pageModel.cunPage=1; var s=""; for(var i=0;i<pageModel.pageContent;i++){ s+='<span>'+stus[i].num+'</span><span>'+stus[i].sname+'</span><span>'+stus[i].age+'</span><span>'+stus[i].sex+'</span><br/>'; } contentDiv.innerHTML=s; Num.innerText=pageModel.cunPage; } //默认为首页 doFirst(); //下一页 function doNext(){ if(pageModel.cunPage-totalPage<0){ pageModel.cunPage++; } //alert(pageModel.cunPage); var start=(pageModel.cunPage-1)*pageModel.pageContent; var end=0; var flag=false;//用于判断是否是最后一页 if(pageModel.cunPage-totalPage<0){ end=pageModel.cunPage*pageModel.pageContent; flag=true; }else if(pageModel.cunPage-totalPage==0){ end=totalNum; flag=true; }else{ flag=false; } if(flag){ var s=""; for(var i=start;i<end;i++){ s+='<span>'+stus[i].num+'</span><span>'+stus[i].sname+'</span><span>'+stus[i].age+'</span><span>'+stus[i].sex+'</span><br/>'; } contentDiv.innerHTML=s; Num.innerText=pageModel.cunPage; } } //上一页 function doLast(){ if(pageModel.cunPage>1){ pageModel.cunPage--; } var start=(pageModel.cunPage-1)*pageModel.pageContent; var end=pageModel.cunPage*pageModel.pageContent; var s=""; for(var i=start;i<end;i++){ s+='<span>'+stus[i].num+'</span><span>'+stus[i].sname+'</span><span>'+stus[i].age+'</span><span>'+stus[i].sex+'</span><br/>'; } contentDiv.innerHTML=s; Num.innerText=pageModel.cunPage; } //最后一页 function doEnd(){ pageModel.cunPage=totalPage; var start=(pageModel.cunPage-1)*pageModel.pageContent; var end=totalNum; //alert(start+"____*****"+end); var s=""; for(var i=start;i<end;i++){ s+='<span>'+stus[i].num+'</span><span>'+stus[i].sname+'</span><span>'+stus[i].age+'</span><span>'+stus[i].sex+'</span><br/>'; } contentDiv.innerHTML=s; Num.innerText=pageModel.cunPage; } //跳转到某一页 function Go(){ var obj=document.getElementById("go").value; var pageNum=obj-totalPage; if(obj>0&&pageNum<0){ pageModel.cunPage=obj; var start=(pageModel.cunPage-1)*pageModel.pageContent; var end=pageModel.cunPage*pageModel.pageContent; var s=""; for(var i=start;i<end;i++){ s+='<span>'+stus[i].num+'</span><span>'+stus[i].sname+'</span><span>'+stus[i].age+'</span><span>'+stus[i].sex+'</span><br/>'; } contentDiv.innerHTML=s; Num.innerText=pageModel.cunPage; }else if(pageNum==0){ doEnd(); Num.innerText=pageModel.cunPage; }else{ alert("输入页数有误,请重新输入!"); } } </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 12 #titleDiv span{ 13 margin-left:50px; 14 } 15 16 #contentDiv{ 17 width:500px; 18 background-color:gray; 19 margin-left:300px; 20 } 21 22 #contentDiv span{ 23 margin-left:54px; 24 } 25 26 #pageDiv{ 27 width:500px; 28 margin-left:420px; 29 margin-top:20px; 30 } 31 32 #pageDiv span{ 33 margin-left:10px; 34 } 35 </style> 36 </head> 37 <body> 38 <div id="titleDiv"> 39 <span>学号</span><span>姓名</span><span>年龄</span><span>性别</span><br/> 40 </div> 41 <div id="contentDiv"> 42 43 </div> 44 <div id="pageDiv"> 45 <span onclick="doFirst();">首页</span><span onclick="doLast()">上一页</span> 46 <span onclick="doNext();">下一页</span><span onclick="doEnd()">尾页</span> 47 <span>第<span id="num"></span>页</span> 48 <input type="text" style="20px" id="go"/><span onclick="Go()">GO</span> 49 </div> 50 </body> 51 <script> 52 //创建数组 53 var stus=[]; 54 //创建学生函数对象 55 function Student(num,sname,age,sex){ 56 this.num=num; 57 this.sname=sname; 58 this.age=age; 59 this.sex=sex; 60 this.toString=function(){ 61 return num+"-"+sname+"-"+age+"-"+sex; 62 } 63 } 64 65 //初始化 66 function init(){ 67 //多个学生信息装入数组中 68 for(var i=0;i<55;i++){ 69 stus.push(new Student(1000+i,'zs'+i,20+i,'男')); 70 } 71 } 72 </script> 73 74 <script> 75 init(); 76 </script> 77 78 <script> 79 var contentDiv=document.getElementById("contentDiv"); 80 //获取表示第几页的id,用于插入是第几页 81 var Num=document.getElementById("num"); 82 function PageModel(){ 83 this.cunPage;//当前页 84 this.pageContent;//一页显示多少个 85 this.totalNum;//总记录数 86 this.totalPage=this.totalNum%this.pageContent>0?(this.totalNum/this.pageContent+1):(this.totalNum/this.pageContent);//总页数 87 } 88 var pageModel=new PageModel(); 89 //每页记录数 90 pageModel.pageContent=10; 91 //总记录数 92 var totalNum=stus.length; 93 //总页数 94 var totalPage=totalNum%pageModel.pageContent>0?Math.ceil(totalNum/pageModel.pageContent):Math.floor(totalNum/pageModel.pageContent); 95 96 //首页 97 function doFirst(){ 98 pageModel.cunPage=1; 99 var s=""; 100 for(var i=0;i<pageModel.pageContent;i++){ 101 s+='<span>'+stus[i].num+'</span><span>'+stus[i].sname+'</span><span>'+stus[i].age+'</span><span>'+stus[i].sex+'</span><br/>'; 102 } 103 contentDiv.innerHTML=s; 104 Num.innerText=pageModel.cunPage; 105 } 106 107 //默认为首页 108 doFirst(); 109 110 //下一页 111 function doNext(){ 112 if(pageModel.cunPage-totalPage<0){ 113 pageModel.cunPage++; 114 } 115 //alert(pageModel.cunPage); 116 var start=(pageModel.cunPage-1)*pageModel.pageContent; 117 var end=0; 118 var flag=false;//用于判断是否是最后一页 119 if(pageModel.cunPage-totalPage<0){ 120 end=pageModel.cunPage*pageModel.pageContent; 121 flag=true; 122 }else if(pageModel.cunPage-totalPage==0){ 123 end=totalNum; 124 flag=true; 125 }else{ 126 flag=false; 127 } 128 if(flag){ 129 var s=""; 130 for(var i=start;i<end;i++){ 131 s+='<span>'+stus[i].num+'</span><span>'+stus[i].sname+'</span><span>'+stus[i].age+'</span><span>'+stus[i].sex+'</span><br/>'; 132 } 133 contentDiv.innerHTML=s; 134 Num.innerText=pageModel.cunPage; 135 } 136 } 137 138 //上一页 139 function doLast(){ 140 if(pageModel.cunPage>1){ 141 pageModel.cunPage--; 142 } 143 var start=(pageModel.cunPage-1)*pageModel.pageContent; 144 var end=pageModel.cunPage*pageModel.pageContent; 145 var s=""; 146 for(var i=start;i<end;i++){ 147 s+='<span>'+stus[i].num+'</span><span>'+stus[i].sname+'</span><span>'+stus[i].age+'</span><span>'+stus[i].sex+'</span><br/>'; 148 } 149 contentDiv.innerHTML=s; 150 Num.innerText=pageModel.cunPage; 151 } 152 153 //最后一页 154 function doEnd(){ 155 pageModel.cunPage=totalPage; 156 var start=(pageModel.cunPage-1)*pageModel.pageContent; 157 var end=totalNum; 158 //alert(start+"____*****"+end); 159 var s=""; 160 for(var i=start;i<end;i++){ 161 s+='<span>'+stus[i].num+'</span><span>'+stus[i].sname+'</span><span>'+stus[i].age+'</span><span>'+stus[i].sex+'</span><br/>'; 162 } 163 contentDiv.innerHTML=s; 164 Num.innerText=pageModel.cunPage; 165 } 166 167 //跳转到某一页 168 function Go(){ 169 var obj=document.getElementById("go").value; 170 var pageNum=obj-totalPage; 171 if(obj>0&&pageNum<0){ 172 pageModel.cunPage=obj; 173 var start=(pageModel.cunPage-1)*pageModel.pageContent; 174 var end=pageModel.cunPage*pageModel.pageContent; 175 var s=""; 176 for(var i=start;i<end;i++){ 177 s+='<span>'+stus[i].num+'</span><span>'+stus[i].sname+'</span><span>'+stus[i].age+'</span><span>'+stus[i].sex+'</span><br/>'; 178 } 179 contentDiv.innerHTML=s; 180 Num.innerText=pageModel.cunPage; 181 }else if(pageNum==0){ 182 doEnd(); 183 Num.innerText=pageModel.cunPage; 184 }else{ 185 alert("输入页数有误,请重新输入!"); 186 } 187 } 188 </script> 189 </html>