使用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 ...
随机推荐
- Codeforces704B. Ant Man
n<=5000个数轴上的点,有属性x,a,b,c,d,从i跳到j的代价如下: 问从s跳到t的最小代价. 方法?:先构造s->t链,然后依次插入其他点,每次选个最佳的位置.过了这题,正确性不 ...
- HDU 4416 (后缀自动机)
HDU 4416 Good Article Good sentence Problem : 给一个串S,和一些串T,询问S中有多少个子串没有在T中出现. Solution :首先对所有的T串建立后缀自 ...
- 智能眼镜技术科普：VR、AR、MR的区别
前段时间, 获得谷歌5亿美元融资的技术公司Magic Leap在WSJD展会中放出了一段实录视频,引起不小骚动.如今,也有媒体称他们为MR公司,那么VR.AR.MR之间到底有什么区别呢. VR.AR. ...
- WinExec可能会引起消息重入
WinExec不仅会造成延迟,并且还会引起消息的重入. 以下是调用堆栈: WinvoiceCC.exe!CWinvoiceCCDlg::OnMsgHttpReq(unsigned int wParam ...
- Samba完整篇 ubuntu 10.04
基本的服务器准备工作 修改Root密码 sudo passwd root 在提示下建立新密码 修改静态IP: sudo gedit /etc/network/interfaces #网络配置文件 ...
- 异 形 卵 709 南阳oj
http://acm.nyist.net/JudgeOnline/problem.php? pid=709 异 形 卵 时间限制:1000 ms | 内存限制:65535 KB 难度: 描写叙述 ...
- 查看yarn当前执行任务列表
Author: kwu 查看yarn当前执行任务列表.可使用例如以下命令查看: yarn application -list 如需杀死当前某个作业,使用kill application-id的命令例如 ...
- leetcode笔记：Search in Rotated Sorted Array
一.题目描写叙述 二.解题技巧 因为这道题出现了旋转的情况,即比第一个元素小的元素可能出如今数值的后半段或者不出现. 因此.能够考虑採用变种的二分查找,即在比較中间元素与目标之前,先比較第一个元素与目 ...
- Wps 2013 拼音标注两种方式分析
Wps 2013 拼音标注两种方式分析 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转 ...
- 使用Charles进行网络抓包
一.安装Charles 二.使用 1.http抓包 1.1 现在我们默认是在进行iOS开发,首先确保iPhone和Mac是在同一个局域网下(连同一个WiFi).然后查看Mac的IP地址(打开网络偏好设 ...