使用JS分页 <span> beta 1.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{
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="width: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>
<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="width: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>
使用JS分页 <span> beta 1.0的更多相关文章
- 使用JS分页 <span> beta 3.0 完成封装的分页
<html> <head> <title>分页</title> <style> #titleDiv{ width:500px; backgr ...
- 使用JS分页 <span> beta 2.0 未封装的分页
<html> <head> <title>分页</title> <style> #titleDiv{ width:500px; backgr ...
- 自己封装的JS分页功能[用于搭配后台使用]
* 2016.7.03 修复bug,优化代码逻辑 * 2016.5.25 修复如果找不到目标对象的错误抛出. * 2016.5.11 修复当实际页数(pageNumber)小于生成的页码间隔数时的bu ...
- Jquery-pagination.js分页处理
首先提供pagination.js的插件源码 /** * This jQuery plugin displays pagination links inside the selected elemen ...
- jquery.pagination.js分页
参数说明 参数名 描述 参数值 maxentries 总条目数 必选参数,整数 items_per_page 每页显示的条目数 ...
- 一个重构的js分页类
// JavaScript Document /**//** * js分页类 * @param iAbsolute 每页显示记录数 * @param sTableId 分页表格属性ID值,为Strin ...
- 浅谈js分页的几种方法
一个项目中必然会遇到分页这种需求的,分页可以使数据加载更合理,也让页面显示更美观,更有层次感!那么js分页到底如何实现呢?下面我就来讲一下三种循序渐进的方法 1.自己纯手写分页 更深入的去理解分页的意 ...
- JS分页条插件
目标 制作js分页导航jq插件,用于无刷新分页或者刷新分页 实现目标参考京东和天猫的分页条. 有四个固定按钮,前页码,后页码,首页,末页. 程序关键点在于计算中间页面的起止位置.逻辑是以当前页码为参照 ...
- js分页实例
js分页实例 案例1 1.js_pageusers.html <!DOCTYPE html> <html> <head> <title>js_pageu ...
随机推荐
- Mybatis教程（一）
1 Mybatis教程(一) 学习过的持久层框架:DBUtils , Hibernate Mybatis就是类似于hibernate的orm持久层框架. 为什么学Mybatis? 目前最主流 ...
- SecureCRT在Tab下的Title显示IP
注意:要针对每个Session进行修改才行. 参考: http://www.cnblogs.com/tyhmj/archive/2013/12/20/3483247.html
- Servlet的Cookies处理
以下内容引用自http://wiki.jikexueyuan.com/project/servlet/cookies-handling.html: Cookies是存储在客户端计算机上的文本文件,用于 ...
- Servlet的HelloWorld实例
以下内容引用自http://wiki.jikexueyuan.com/project/servlet/first-example.html: Servlets是Java类,服务于HTTP请求并实现了j ...
- Hadoop HDFS NFS GateWay部署深入具体解释
目的:通过挂载的方式,能够相似訪问本地磁盘的方式一样的訪问Hadoop文件.简单.方便.快捷. 0.系统版本号&hadoop版本号 1)系统版本号 [root@WEB-W031 sbin]# ...
- Cocos2dx使用ios内支付IAP具体流程-白白
今天总结了一下cocos2d-x使用ios内支付iap的具体流程,封装好了调用接口,代码与具体说明在此 http://download.csdn.net/detail/u010229677/81566 ...
- java.lang.IllegalArgumentException: sheetName '' is invalid
1.错误描写叙述 java.lang.IllegalArgumentException: sheetName '' is invalid - character count MUST be great ...
- HDU1864_最大报销额(背包/01背包)
解题报告 pid=1864">题目传送门 #include <cstdio> #include <cstring> #include <iostream& ...
- 数据结构 - 希尔排序(Shell's Sort) 具体解释 及 代码(C++)
数据结构 - 希尔排序(Shell's Sort) 具体解释 及 代码(C++) 本文地址: http://blog.csdn.net/caroline_wendy/article/details/2 ...
- 纯css3实现美化复选框和手风琴效果（详细）
关键技术点和原理: 原理就是把 checkbox或 radio 给隐藏掉 ,然后给选框 绑定一个label标签. 然后用label标签作为容器,在里面放一个:before或一个after 用bef ...