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中的parseInt使用技巧
Sep 03 Javascript
jQuery 常见开发使用技巧总结
Dec 26 Javascript
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
Sep 14 Javascript
Javascript事件热键兼容ie|firefox
Dec 30 Javascript
js 实现菜单上下显示附效果图
Nov 21 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
Dec 19 Javascript
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
Sep 15 Javascript
JS实现的简单轮播图运动效果示例
Dec 22 Javascript
使用原生js写ajax实例(推荐)
May 31 Javascript
AngularJS 教程及实例代码
Oct 23 Javascript
JavaScript React如何修改默认端口号方法详解
Jul 28 Javascript
何时使用Map来代替普通的JS对象
Apr 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 过滤器实现代码
2010/08/09 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
thinkphp5框架路由原理与用法详解
2020/02/11 PHP
JavaScript Array对象扩展indexOf()方法
2014/05/09 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
2016/07/09 Javascript
用jQuery实现可输入多选下拉组合框实例代码
2017/01/18 Javascript
AngularJS折叠菜单实现方法示例
2017/05/18 Javascript
JavaScript在控件上添加倒计时功能的实现代码
2017/07/04 Javascript
JavaScript+H5实现微信摇一摇功能
2018/05/23 Javascript
在vue中使用SockJS实现webSocket通信的过程
2018/08/29 Javascript
js String.prototype.trim字符去前后空格的扩展
2020/08/23 Javascript
[03:58]兄弟们,回来开黑了!DOTA2昔日战友招募宣传视频
2016/07/17 DOTA
python实现从ftp服务器下载文件的方法
2015/04/30 Python
python3实现暴力穷举博客园密码
2016/06/19 Python
python多线程socket编程之多客户端接入
2017/09/12 Python
Python进程间通信Queue实例解析
2018/01/25 Python
python语言中with as的用法使用详解
2018/02/23 Python
Python3.6连接Oracle数据库的方法详解
2018/05/18 Python
python实现文本界面网络聊天室
2018/12/12 Python
Python 闭包,函数分隔作用域,nonlocal声明非局部变量操作示例
2019/10/14 Python
基于python计算滚动方差(标准差)talib和pd.rolling函数差异详解
2020/06/08 Python
Python把图片转化为pdf代码实例
2020/07/28 Python
CSS3 Media Queries详细介绍和使用实例
2014/05/08 HTML / CSS
预订全球最佳旅行体验:Viator
2018/03/30 全球购物
英国蛋糕装饰用品一站式商店:Craft Company
2019/03/18 全球购物
手工制作的意大利皮革运动鞋:KOIO
2020/01/05 全球购物
公司活动总结范文
2014/07/01 职场文书
领导干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
面试感谢信范文
2015/01/22 职场文书
保研推荐信范文
2015/03/25 职场文书
培训通知
2015/04/17 职场文书
领导莅临指导欢迎词
2015/09/30 职场文书
2016幼儿园教师年度考核评语
2015/12/01 职场文书
跟班学习心得体会(共6篇)
2016/01/23 职场文书
python ConfigParser库的使用及遇到的坑
2022/02/12 Python
python中pycryto实现数据加密
2022/04/29 Python