使用JS分页 span beta 2.0 未封装的分页

<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="doFirst();" >首页</a>    <a href="#" onclick="doUp();" >上一页</a>    <a href="#" onclick="doNext();" >下一页</a><a href="#" onclick="doLast();" >尾页</a>    <input id="goPage" style="width: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>

View Code

  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="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="width: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>

转载于:https://www.cnblogs.com/1020182600HENG/p/6072964.html

使用JS分页 span beta 2.0 未封装的分页相关推荐

使用JS分页 span beta 3.0 完成封装的分页
<html><head><title>分页</title><style>#titleDiv{width:500px;background-c ...
vue.js 2.0实现的简单分页
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
更新Silverlight ctp到Silverlight beta 1.0
下面是我更新Silverlight ctp到Silverlight beta 1.0的一个纪录,希望对各位同学有帮助. 1.卸载Silverlight ctp 和sdk以及VS template 2. ...
mvc jquery ajax分页实例,jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解，mvcpagerajax分页...
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解,mvcpagerajax分页简单的两个步骤即可实现分页功能 //回调里面进行业务处理 function lo ...
【开源】QuickPager ASP.NET2.0分页控件V2.0.0.3 【增加了使用说明】
================================ 欢迎转载,但是请注明出处.本文出自博客园 .谢谢合作! ================================ 最新版本:V ...
SqlServer分页排序存储过程 V1.0
set ANSI_NULLS ON set QUOTED_IDENTIFIER ON GO /* 分页排序存储过程 V1.0 */ ALTER procedure [dbo].[sp_Key ...
试用Mono Beta 1.0
下载地址: http://www.go-mono.com/download.html 测试环境:Windows XP.Windows 2003 测试代码: F:\HelloWorld.cs usi ...
php实现多条件查找分页,Yii2.0框架实现带分页的多条件搜索功能示例
本文实例讲述了Yii2.0框架实现带分页的多条件搜索功能.分享给大家供大家参考,具体如下: 方法一在控制器中 public function actionShow(){ $where['title' ...
【开源】QuickPager ASP.NET2.0分页控件V2.0.0.1——支持多种数据库。让分页更加简单。...
分页控件的源代码下载网址:http://www.cnblogs.com/jyk/archive/2008/04/25/1170979.html (在网页的下面) 下载文件里面由一个测试网页:http: ...

使用JS分页 span beta 2.0 未封装的分页

使用JS分页 span beta 2.0 未封装的分页相关推荐

最新文章

热门文章