使用JS分页 <span> beta 3.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 onclick="doFirst();">首页</span><span onclick="doUp();">上一页</span>
<span onclick="doNext();">下一页</span><span onclick="doLast();">尾页</span>
<input id="goPage" style="width: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="width:20px"/><input type="button" onclick="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>
<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 onclick="doFirst();">首页</span><span onclick="doUp();">上一页</span>
<span onclick="doNext();">下一页</span><span onclick="doLast();">尾页</span>
<input id="goPage" style="width: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="width:20px"/><input type="button" onclick="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>
使用JS分页 <span> beta 3.0 完成封装的分页的更多相关文章
- 使用JS分页 <span> beta 2.0 未封装的分页
<html> <head> <title>分页</title> <style> #titleDiv{ width:500px; backgr ...
- 使用JS分页 <span> beta 1.0
<html> <head> <title>分页</title> <style> #titleDiv{ width:500px; backgr ...
- vue.js 2.0实现的简单分页
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
- 抓取Js动态生成数据且以滚动页面方式分页的网页
代码也可以从我的开源项目HtmlExtractor中获取. 当我们在进行数据抓取的时候,如果目标网站是以Js的方式动态生成数据且以滚动页面的方式进行分页,那么我们该如何抓取呢? 如类似今日头条这样的网 ...
- 发布Ext JS 5.1 beta版本
原文:Announcing Ext JS 5.1 Beta 概述 我们很高兴的宣布,Ext JS 5.1 beta发布了.自从Ext JS 5.0.1,我们一直在努力添加一些令人兴奋的和一些在Senc ...
- 【JavaScript 封装库】BETA 5.0 测试版发布！
JavaScript 前端框架(封装库) BETA 5.0 已于10月10日正式发布,今天开始提供 BETA 5.0 的 API 参考文献.相较于之前 5 个版本的发布都是草草的提供源代码,并没有很多 ...
- 用Vue2.0实现简单的分页及跳转
用Vue2.0实现简单的分页及跳转 2018年07月26日 20:29:51 Freya_yyy 阅读数 3369 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog ...
- 【原创】自己动手写工具----XSmartNote [Beta 3.0]
一.前面的话 在动笔之前,一直很纠结到底要不要继续完成这个工具,因为上次给它码代码还是一年多之前的事情,参考自己动手写工具----XSmartNote [Beta 2.0],这篇博文里,很多园友提出了 ...
- EF Core 1.0 和 SQLServer 2008 分页的问题
EF Core 1.0 在sqlserver2008分页的时候需要指定用数字分页. EF Core1.0 生成的分页语句中使用了 Featch Next.这个语句只有在SqlServer2012的时候 ...
随机推荐
- 【HDOJ3047】Zjnu Stadium（带权并查集）
题意:浙江省第十二届大学生运动会在浙江师范大学举行,为此在浙师大建造了一座能容纳近万人的新体育场. 观众席每一行构成一个圆形,每个圆形由300个座位组成,对300个座位按照顺时针编号1到300,且可以 ...
- Servlet发送邮件
以下内容引用自http://wiki.jikexueyuan.com/project/servlet/sending-email.html: 使用Servlet发送一封电子邮件是非常简单的,但是开始之 ...
- python类变量以及应用场景
类变量是python 中class 的变量,区别于实例的变量.我们通过一些例子具体了解一下 先看下面的例子 >>> class Demo(object): ... v1 = 1 .. ...
- 在gentoo中打开tomcat的远程调试开关
在一般象gentoo等发行版中,系统安装tomcat这类软件后会产生一些启动脚本, 比如是/etc/init.d/tomcat-7, 启动方式与原始的tomcat不太一样.在gentoo中,假设须要远 ...
- 又见古老的Typosquatting攻击：这次入侵Npm窃取开发者身份凭证
有些攻击方式虽然听起来很幼稚,但有时候却也可以生效,比如typosquatting攻击——我们上次看到这种攻击是在去年6月份,这本身也是种很古老的攻击方式. 所谓的typosquatting,主要是通 ...
- HDU 1051 Wooden Sticks 贪心题解
本题一看就知道是最长不减序列了,一想就以为是使用dp攻克了. 只是那是个错误的思路. 我就动了半天没动出来.然后看了看别人是能够使用dp的,只是那个比較难证明其正确性,而其速度也不快.故此并非非常好的 ...
- Maven项目中遇到的奇葩问题（续）
场景描写叙述 开发项目搞环境是一个很蛋疼的问题.总是会遇到各种奇葩的问题,上一篇文章http://blog.csdn.net/gao36951/article/details/50955526中遇到的 ...
- Ckeditor通过Ajax更新数据
之前在表单中对ckeditor的赋值就直接是 $("#theadEditor").val(result); 而如今我想通过点击不同选项来使用Ajax在后台訪问数据.对ckedito ...
- jmeter实现Http接口测试介绍
构建一个测试页面 页面功能测试说到底就是模拟用户浏览点击页面的全过程,很多的测试工具都可以对该过程进行录制后模拟用户操作,而压力测试就是将这个过程在单位时间内重复成千上万次,看检测应用的高可用,接下来 ...
- VS2012 ASP.NET 母版页的创建与使用
在做牛腩新闻公布系统的过程中,须要使用ASP.NET的母版页来抽出全部网页的公共部分,以便更好的复用自己的网页布局和设计. 首先我们来看怎样创建一个新的母版页,例如以下图所看到的: 加入之后,例如以下 ...