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文字滚动停顿效果代码
Jun 28 Javascript
js获取客户端网卡的IP地址、MAC地址
Mar 26 Javascript
JavaScript及jquey实现多个数组的合并操作
Sep 06 Javascript
JS交换变量的方法
Jan 21 Javascript
js实现无缝滚动特效
Dec 20 Javascript
TypeScript Type Innference(类型判断)
Mar 10 Javascript
javascript实现数据双向绑定的三种方式小结
Mar 09 Javascript
AngularJs分页插件使用详解
Jun 30 Javascript
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
Dec 15 Javascript
交互式可视化js库gojs使用介绍及技巧
Feb 18 Javascript
使用Ajax实现进度条的绘制
Apr 07 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扩展程序实现守护进程
2015/04/16 PHP
php验证码的制作思路和实现方法
2015/11/12 PHP
php str_getcsv把字符串解析为数组的实现方法
2017/04/05 PHP
PHP操作Redis常用技巧总结
2018/04/24 PHP
Javascript 获取滚动条位置等信息的函数
2009/09/08 Javascript
jquery中的$(document).ready()与window.onload的区别
2009/11/18 Javascript
Jquery中children与find之间的区别详细解析
2013/11/29 Javascript
js QQ客服悬浮效果实现代码
2014/12/12 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
2015/04/06 Javascript
JavaScript判断数字是否为质数的方法汇总
2016/06/02 Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
2016/09/04 Javascript
原生js实现addclass,removeclass,toggleclasss实例
2016/11/24 Javascript
微信小程序  checkbox组件详解及简单实例
2017/01/10 Javascript
vue综合组件间的通信详解
2017/11/06 Javascript
web前端页面生成exe可执行文件的方法
2018/02/08 Javascript
js中int和string数据类型互相转化实例
2019/01/16 Javascript
JS面向对象编程基础篇(一) 对象和构造函数实例详解
2020/03/03 Javascript
vue+Element中table表格实现可编辑(select下拉框)
2020/05/21 Javascript
Python实现Linux中的du命令
2017/06/12 Python
基于numpy中数组元素的切片复制方法
2018/11/15 Python
python将txt文档每行内容循环插入数据库的方法
2018/12/28 Python
python图像处理模块Pillow的学习详解
2019/10/09 Python
python代码如何注释
2020/06/01 Python
详解python爬取弹幕与数据分析
2020/11/14 Python
python爬虫scrapy框架之增量式爬虫的示例代码
2021/02/26 Python
纯CSS3实现圆圈动态发光特效动画的示例代码
2021/03/08 HTML / CSS
贝尔帐篷精品店:Bell Tent Boutique
2019/06/12 全球购物
冰淇淋开店创业计划书
2014/02/01 职场文书
《兰亭集序》教学反思
2014/02/11 职场文书
职员竞岗演讲稿
2014/05/14 职场文书
财务负责人任命书
2014/06/06 职场文书
2014四风问题对照检查材料范文
2014/09/15 职场文书
法院授权委托书格式
2014/09/28 职场文书
借条如何写
2015/05/26 职场文书
导游词之珠海轮廓
2019/10/25 职场文书
晶体管单管来复再生式收音机
2021/04/22 无线电