使用JS分页 span beta 3.0 完成封装的分页
2024-06-16 14:28:45
<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>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="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>转载于:https://www.cnblogs.com/1020182600HENG/p/6073380.html
使用JS分页 span beta 3.0 完成封装的分页相关推荐
- 使用JS分页 span beta 2.0 未封装的分页
<html><head><title>分页</title><style>#titleDiv{width:500px;background-c ...
- MyBatis 分页插件 PageHelper:是如何拦截SQL进行分页
目录 Springboot项目集成 分页插件参数介绍 如何选择配置这些参数 场景一 场景二 场景三 场景四 场景五 PageHelper的使用 PageHelper实现原理1: interceptor ...
- 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' ...
最新文章
- 深度 | 解决真实世界问题：如何在不平衡类上使用机器学习？
- 李航老师《统计学习方法》的代码实现、课件、作业等相关资源的最全汇总
- 量子纠缠在量子计算机中的作用,量子纠缠
- 通过反汇编来理解restrict关键字
- caffe安装篇（一）
- html全局事件,HTML5全局属性和事件
- java 测试 jar_java – 从可执行jar运行spring测试
- 图解设计模式：行为型模式之观察者模式
- 如何卸载赛门铁克symantec，ivanti
- vs2013_update5下载链接(请使用迅雷下载)
- 偏最小二乘法的几种解释
- C++综合实例——个人银行账户管理程序
- 《Stacked Hourglass Networks for Human Pose Estimation》
- OpenNLP使用小结
- 黑马JAVA P104 继承后构造器的特点、this、super使用总结
- 18周过后~（学期总结）
- 服务器装系统无法定位,!安装程序无法创建新的系统分区也无法定位分区，怎么办？...
- 机器视觉 OpenCV—python 多目标跟踪与视频分析
- 【转】金玉良言 —— You and Your Research
- 2020年手机处理器排行榜