使用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 ...
随机推荐
- 调用系统相机拍照，保存照片，调用系统裁剪API对照片处理，显示裁剪之后的照片
package com.pingyijinren.test; import android.annotation.TargetApi; import android.app.Notification; ...
- node+mongodb+win7
一.安装mongodb,参照教程,注意要先启动mongod.exe,再启动mongd.exe.
- bzoj2212 Tree Rotations
被BZOJ坑了一下午,原以为是我程序有问题一直WA,结果是我数组小了...为啥不给我RE!!! 线段树合并,对于逆序对而言,只能通过交换左右子树来达到,那么我们就可以想到对于一个结点而言,我们当然要取 ...
- 调整JVM内存大小
首次运行公司项目,出现了内存溢出,具体出现java.lang.OutOfMemoryError: PermGen space和java.lang.OutOfMemoryError:GC overhea ...
- JVM定位程序假死或cpu占用高的线程
linux系统: 参考:https://blog.csdn.net/qq_40197576/article/details/80287515 1>使用top命令查看占用cpu进程情况,得到jav ...
- mvn解决jar包冲突
转自:http://blog.csdn.net/guanglihuan/article/details/50512855 对于Jar包冲突问题,我们开发人员经常都会有碰到,当我们使用一些jar包中的类 ...
- Servlet的客户端请求
以下内容引用自http://wiki.jikexueyuan.com/project/servlet/client-request.html: 当浏览器请求网页时,它会向Web服务器发送大量信息,这些 ...
- Android之AssetManager使用
1. 获取AssetManager AssetManager assetManager = context.getAssets(); 2. 列出assets文件夹下全部文件 String[] file ...
- phpmywind教程：关于日期函数调用整理
近期群里一直在问phpmywind的日期函数怎么调用,今天抽出时间给大家整理出来. 以月/日格式显示: <?php echo MyDate('m-d', $row['posttime']); ? ...
- Echarts Binning on map 根据真实经纬度渲染数据
要渲染的数据:[经度,维度,值] 例如: var data = [[116.420691626, 39.4574061868, 63],[116.423620497, 39.4574061868, 2 ...