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 相关文章推荐
js window.event对象详尽解析
Feb 17 Javascript
javascript 多浏览器 事件大全
Mar 23 Javascript
Javascript根据指定下标或对象删除数组元素
Dec 21 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
Aug 24 Javascript
canvas实现探照灯效果
Feb 07 Javascript
Vue组件开发初探
Feb 14 Javascript
hammer.js实现图片手势放大效果
Aug 29 Javascript
layui动态绑定事件的方法
Sep 20 Javascript
webpack打包优化的几个方法总结
Feb 10 Javascript
Vue+webpack实现懒加载过程解析
Feb 17 Javascript
微信小程序scroll-view的滚动条设置实现
Mar 02 Javascript
原生js实现购物车功能
Sep 23 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
星际争霸中的热键
2020/03/04 星际争霸
php dirname(__FILE__) 获取当前文件的绝对路径
2011/06/28 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
thinkPHP5框架自定义验证器实现方法分析
2018/06/11 PHP
PHP常用函数之格式化时间操作示例
2019/10/21 PHP
PHP isset()及empty()用法区别详解
2020/08/29 PHP
很酷的javascript loading效果代码
2008/06/18 Javascript
window.onload 加载完毕的问题及解决方案(下)
2009/07/09 Javascript
js循环改变div颜色具体方法
2013/06/25 Javascript
JavaScript中的typeof操作符用法实例
2014/04/05 Javascript
javascript实现捕捉键盘上按下的键
2015/05/05 Javascript
Bootstrap每天必学之缩略图与警示窗
2015/11/29 Javascript
echarts整合多个类似option的方法实例
2018/07/10 Javascript
回顾Javascript React基础
2019/06/15 Javascript
es6中使用map简化复杂条件判断操作实例详解
2020/02/19 Javascript
python多线程threading.Lock锁用法实例
2014/11/01 Python
使用Django Form解决表单数据无法动态刷新的两种方法
2017/07/14 Python
Python读取word文本操作详解
2018/01/22 Python
Python3实现爬取指定百度贴吧页面并保存页面数据生成本地文档的方法
2018/04/22 Python
Django使用Mysql数据库已经存在的数据表方法
2018/05/27 Python
对python 通过ssh访问数据库的实例详解
2019/02/19 Python
bluepy 一款python封装的BLE利器简单介绍
2019/06/25 Python
在python 中split()使用多符号分割的例子
2019/07/15 Python
python实现图片二值化及灰度处理方式
2019/12/07 Python
Python接口测试结果集实现封装比较
2020/05/01 Python
python中upper是做什么用的
2020/07/20 Python
python 实现控制鼠标键盘
2020/11/27 Python
Python实现Word文档转换Markdown的示例
2020/12/22 Python
CSS3中Transition动画属性用法详解
2016/07/04 HTML / CSS
应用服务器有那些
2012/01/19 面试题
高三地理教学反思
2014/01/11 职场文书
好邻里事迹材料
2014/01/16 职场文书
教师对学生的寄语
2014/04/03 职场文书
中级会计大学生职业生涯规划书
2014/09/16 职场文书
求职简历自我评价怎么写
2015/03/10 职场文书