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类
Sep 08 Javascript
JavaScript在IE中“意外地调用了方法或属性访问”
Nov 19 Javascript
浅谈Javascript事件处理程序的几种方式
Jun 27 Javascript
node.js中的console.assert方法使用说明
Dec 10 Javascript
AngularJS快速入门
Apr 02 Javascript
jquery可定制的在线UEditor编辑器
Nov 17 Javascript
AngularJS ng-mousedown 指令
Aug 02 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
Feb 10 Javascript
BootStrap入门学习第一篇
Aug 28 Javascript
微信小程序使用modal组件弹出对话框功能示例
Nov 29 Javascript
解决Vue在Tomcat8下部署页面不加载的问题
Nov 12 Javascript
js制作提示框插件
Dec 24 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的静态成员函数效率更高的原因
2014/06/13 PHP
php数字每三位加逗号的功能函数
2015/10/22 PHP
php resizeimage 部分jpg文件 生成缩略图失败的原因分析及解决办法
2016/03/23 PHP
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
2009/07/14 Javascript
默认让页面的第一个控件选中的javascript代码
2009/12/26 Javascript
JavaScript 学习笔记(七)字符串的连接
2009/12/31 Javascript
js下利用控制器载入对应脚本
2010/07/17 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
2014/05/04 Javascript
jquery常用操作小结
2014/07/21 Javascript
js实现的早期滑动门菜单效果代码
2015/08/27 Javascript
jquery中ajax跨域方法实例分析
2015/12/18 Javascript
JavaScript的ExtJS框架中表格的编写教程
2016/05/21 Javascript
Ajax使用原生态JS验证用户名是否存在
2020/05/26 Javascript
在网页中插入百度地图的步骤详解
2016/12/02 Javascript
简单谈谈gulp-changed插件
2017/02/21 Javascript
js实现省市级联效果分享
2017/08/10 Javascript
Node.js 如何利用异步提升任务处理速度
2019/01/07 Javascript
js取小数点后两位四种方法
2019/01/18 Javascript
vue实现表单录入小案例
2019/09/27 Javascript
JavaScript数组排序小程序实现解析
2020/01/13 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
2020/10/28 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
2020/11/16 Javascript
[01:32:50]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第一场 1月25日
2021/03/11 DOTA
九步学会Python装饰器
2015/05/09 Python
Python实现利用最大公约数求三个正整数的最小公倍数示例
2017/09/30 Python
Python3.5 创建文件的简单实例
2018/04/26 Python
Python subprocess库的使用详解
2018/10/26 Python
使用urllib库的urlretrieve()方法下载网络文件到本地的方法
2018/12/19 Python
详解python selenium 爬取网易云音乐歌单名
2019/03/28 Python
详解pandas使用drop_duplicates去除DataFrame重复项参数
2019/08/01 Python
pandas读取csv文件提示不存在的解决方法及原因分析
2020/04/21 Python
浅谈盘点5种基于Python生成的个性化语音方法
2021/02/05 Python
应届生幼儿园求职信
2013/11/12 职场文书
2015年评职称工作总结范文
2015/04/20 职场文书
管理者们如何制定2019年的工作计划?
2019/07/01 职场文书
SQL实现LeetCode(176.第二高薪水)
2021/08/04 MySQL