javascript分页代码(当前页码居中)


Posted in Javascript onSeptember 20, 2012
function setPage(opt){ 
if(!opt.pageDivId || opt.allPageNum < opt.curpageNum || opt.allPageNum < opt.showPageNum){return false}; 
var allPageNum = opt.allPageNum; //总的页数 
var showPageNum = opt.showPageNum; //显示的页数 
var curpageNum = opt.curpageNum; // 当前的页数 
var pageDIvBox = document.getElementById(opt.pageDivId); 
//左边或右边显示页码的个数 
var lrNum = Math.floor(showPageNum/2); 
if(curpageNum>1){ 
var oA = document.createElement('a'); 
oA.href='#1'; 
oA.innerHTML = '首页' 
pageDIvBox.appendChild(oA); 
} 
if(curpageNum>1){ 
var oA = document.createElement('a'); 
oA.href='#'+(curpageNum-1); 
oA.innerHTML = '上一页' 
pageDIvBox.appendChild(oA); 
} 
if(curpageNum<showPageNum-2 || allPageNum == showPageNum){ 
for(var i=1;i<=showPageNum;i++){ 
var oA = document.createElement('a'); 
oA.href = '#'+i; 
if(curpageNum==i){ 
oA.innerHTML = i; 
}else{ 
oA.innerHTML = "[" + i + "]"; 
} 
pageDIvBox.appendChild(oA); 
} 
}else{ 
//倒数第一页的处理 
if(allPageNum-curpageNum<lrNum && curpageNum == allPageNum-1){ 
for(var i=1;i<=showPageNum;i++){ 
console.log((curpageNum - showPageNum + i)); 
var oA = document.createElement('a'); 
oA.href = '#'+ (curpageNum - (showPageNum-1) + i); 
if(curpageNum == (curpageNum - (showPageNum-1) + i)){ 
oA.innerHTML = (curpageNum - (showPageNum-1) + i) 
}else{ 
oA.innerHTML = '['+(curpageNum - (showPageNum-1) + i)+']' 
} 
pageDIvBox.appendChild(oA); 
} 
} 
//最后一页的处理 
else if(allPageNum-curpageNum<lrNum && curpageNum == allPageNum){ 
for(var i=1;i<=showPageNum;i++){ 
console.log((curpageNum - showPageNum + i)); 
var oA = document.createElement('a'); 
oA.href = '#'+ (curpageNum - showPageNum + i); 
if(curpageNum == (curpageNum - showPageNum + i)){ 
oA.innerHTML = (curpageNum - showPageNum + i) 
}else{ 
oA.innerHTML = '['+(curpageNum-showPageNum + i)+']' 
} 
pageDIvBox.appendChild(oA); 
} 
}else{ 
for(var i=1;i<=showPageNum;i++){ 
var oA = document.createElement('a'); 
oA.href = '#'+ (curpageNum - (showPageNum-lrNum) + i); 
if(curpageNum == (curpageNum - (showPageNum-lrNum) + i)){ 
oA.innerHTML = (curpageNum - (showPageNum-lrNum) + i) 
}else{ 
oA.innerHTML = '['+(curpageNum - (showPageNum-lrNum) + i)+']' 
} 
pageDIvBox.appendChild(oA); 
} 
} 
} 
if(curpageNum<allPageNum){ 
for(var i=1;i<=2;i++){ 
if(i==1){ 
var oA = document.createElement('a'); 
oA.href='#'+(parseInt(curpageNum)+1); 
oA.innerHTML = '下一页' 
}else{ 
var oA = document.createElement('a'); 
oA.href='#'+allPageNum; 
oA.innerHTML = '尾页' 
} 
pageDIvBox.appendChild(oA); 
} 
} 
var oA = document.getElementsByTagName('a'); 
//给页码添加点击事件 
for(var i=0;i<oA.length;i++){ 
oA[i].onclick = function(){ 
//当前点的页码 
var sHref = this.getAttribute('href').substring(1); 
//清空页数显示 
pageDIvBox.innerHTML = ''; 
setPage({ 
pageDivId:'page', 
showPageNum:5, //显示的个数 
allPageNum:10, //总页数 
curpageNum:sHref //当前页数 
}) 
} 
} 
} 
window.onload = function(){ 
setPage({ 
pageDivId:'page', 
showPageNum:5, //显示的个数 
allPageNum:10, //总页数 
curpageNum:1 //当前页数 
}) 
}

昨天看了妙味课堂的 分页视频教程,今天自己参照其思路,自己写了下,并且自己新增了一个‘显示页码个数'的属性 ‘showPageNum';

下面对关键的几个地方做个总结:

1.点击的当前页码需要在显示的页码中居中;
无论是显示 3页 5页 7页 9页…… 等等
当前页要居中,可以推出一个公式
用显的页码个数除以2 再取整,就可以得到左右需要显的页码个数。这个对后面的分页判断很有用
var lrNum = Math.floor(showPageNum/2);

2.获取页码
this.getAttribute('href') 用它可以得到相对路径;this.href 用它只能得到绝对路径

DEMO在线演示 http://demo.3water.com/js/2012/js_page/ 

Javascript 相关文章推荐
javascript中将Object转换为String函数代码 (json str)
Apr 29 Javascript
JS简单实现登陆验证附效果图
Nov 19 Javascript
推荐5 个常用的JavaScript调试技巧
Jan 08 Javascript
jquery利用拖拽方式在图片上添加热链接
Nov 24 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
Aug 10 Javascript
微信小程序之仿微信漂流瓶实例
Dec 09 Javascript
javascript浏览器用户代理检测脚本实现方法
Oct 27 Javascript
妙用缓存调用链实现JS方法的重载
Apr 30 Javascript
一秒学会微信小程序制作table表格
Feb 14 Javascript
vue使用prop可以渲染但是打印台报错的解决方式
Nov 13 Javascript
JavaScript实现电灯开关小案例
Mar 30 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
Oct 29 Javascript
javascript获取作用在元素上面的样式属性代码
Sep 20 #Javascript
一个基于jquery的文本框记数器
Sep 19 #Javascript
html中的input标签的checked属性jquery判断代码
Sep 19 #Javascript
基于jquery打造的百分比动态色彩条插件
Sep 19 #Javascript
jQuery Ajax提交表单查询获得数据实例代码
Sep 19 #Javascript
基于JQuery的多标签实现代码
Sep 19 #Javascript
一样的table?不一样的table(可编辑状态table)
Sep 19 #Javascript
You might like
PHP session常见问题集锦及解决办法总结
2007/03/18 PHP
php 小乘法表实现代码
2009/07/16 PHP
php使用Jpgraph绘制简单X-Y坐标图的方法
2015/06/10 PHP
PHP生成条形码大揭秘
2015/09/24 PHP
js 动态文字滚动的例子
2011/01/17 Javascript
JavaScript 继承使用分析
2011/05/12 Javascript
javascript封装的sqlite操作类实例
2015/07/17 Javascript
Javascript小技能总结(推荐)
2016/06/02 Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
2016/12/26 Javascript
js仿淘宝评价评分功能
2017/02/28 Javascript
简单实现jQuery弹窗效果
2017/10/30 jQuery
解决在vue项目中webpack打包后字体不生效的问题
2018/09/01 Javascript
JavaScript实时更新当前的时间的示例代码
2020/07/15 Javascript
Python随机生成一个6位的验证码代码分享
2015/03/24 Python
python使用urllib2提交http post请求的方法
2015/05/26 Python
Django框架中render_to_response()函数的使用方法
2015/07/16 Python
python绘制简单折线图代码示例
2017/12/19 Python
python dataframe astype 字段类型转换方法
2018/04/11 Python
详解Django中CBV(Class Base Views)模型源码分析
2019/02/25 Python
使用python脚本自动创建pip.ini配置文件代码实例
2019/09/20 Python
python安装本地whl的实例步骤
2019/10/12 Python
Python 下载Bing壁纸的示例
2020/09/29 Python
Django中的DateTimeField和DateField实现
2021/02/24 Python
WiFi云数码相框:Nixplay
2018/07/05 全球购物
英国文具、办公用品和科技商店:Ryman
2018/09/27 全球购物
测试时代收集的软件测试面试题
2013/09/25 面试题
老师推荐信
2013/10/28 职场文书
应届生英语教师求职信
2013/11/05 职场文书
大学生入党思想汇报
2014/01/01 职场文书
酒店销售经理岗位职责
2014/01/31 职场文书
小学家长学校培训材料
2014/08/24 职场文书
2015年加油站站长工作总结
2015/05/27 职场文书
初中团委工作总结
2015/08/13 职场文书
Redis IP地址的绑定的实现
2021/05/08 Redis
详解Python牛顿插值法
2021/05/11 Python
CSS基础详解
2021/10/16 HTML / CSS