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 Event学习第二章 Event浏览器兼容性
Feb 07 Javascript
jquery基础教程之deferred对象使用方法
Jan 22 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
Apr 25 Javascript
Javascript获取CSS伪元素属性的实现代码
Sep 28 Javascript
js跨域问题浅析及解决方法优缺点对比
Nov 08 Javascript
2014 HTML5/CSS3热门动画特效TOP10
Dec 07 Javascript
深入理解$.each和$(selector).each
May 15 Javascript
原生JS实现图片轮播效果
Dec 26 Javascript
jQuery实现滚动效果
Nov 17 jQuery
微信小程序使用form表单获取输入框数据的实例代码
May 17 Javascript
js Math数学简单使用操作示例
Mar 13 Javascript
JS轻量级函数式编程实现XDM二
Jun 16 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
基于PHP5魔术常量与魔术方法的详解
2013/06/13 PHP
windows中为php安装mongodb与memcache
2015/01/06 PHP
JQUERY 对象与DOM对象之两者相互间的转换
2009/04/27 Javascript
读jQuery之十一 添加事件核心方法
2011/07/31 Javascript
js中更短的 Array 类型转换
2011/10/30 Javascript
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
2013/06/14 Javascript
AngularJS基础知识
2014/12/21 Javascript
浅谈javascript中onbeforeunload与onunload事件
2015/12/10 Javascript
javascript中错误使用var造成undefined
2016/03/31 Javascript
Javascript发送AJAX请求实例代码
2016/08/21 Javascript
EasyUI 结合JS导出Excel文件的实现方法
2016/11/10 Javascript
一个可复用的vue分页组件
2017/05/15 Javascript
Vue2.0 vue-source jsonp 跨域请求
2017/08/04 Javascript
原生JS上传大文件显示进度条 php上传文件代码
2020/03/27 Javascript
vue表单自定义校验规则介绍
2018/08/28 Javascript
vue 基于element-ui 分页组件封装的实例代码
2018/12/10 Javascript
vue项目打包之后背景样式丢失的解决方案
2019/01/17 Javascript
基于 jQuery 实现键盘事件监听控件
2019/04/04 jQuery
使用nodejs分离html文件里的js和css详解
2019/04/12 NodeJs
JS实现点餐自动选择框(案例分析)
2019/12/10 Javascript
[42:24]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第一场 11.01
2020/11/02 DOTA
python计算圆周长、面积、球体体积并画出圆
2014/04/08 Python
闭包在python中的应用之translate和maketrans用法详解
2014/08/27 Python
python算法表示概念扫盲教程
2017/04/13 Python
python利用thrift服务读取hbase数据的方法
2018/12/27 Python
Python爬虫之UserAgent的使用实例
2019/02/21 Python
Python如何使用正则表达式爬取京东商品信息
2020/06/01 Python
Python使用OpenPyXL处理Excel表格
2020/07/02 Python
使用canvas实现黑客帝国数字雨效果
2020/01/02 HTML / CSS
为奢侈时尚带来了慈善元素:Olivela
2018/09/29 全球购物
演讲稿怎么写
2014/01/07 职场文书
《童趣》教学反思
2014/02/19 职场文书
新闻专业毕业生英文求职信
2014/03/19 职场文书
向国旗敬礼学生寄语大全
2014/09/30 职场文书
倡议书作文
2015/01/19 职场文书
搞笑Gif:这么白这么长的腿像极了一楼的女朋友
2022/03/21 杂记