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 相关文章推荐
让innerHTML的脚本也可以运行起来
Jul 01 Javascript
javascript onmouseout 解决办法
Jul 17 Javascript
IE6/7/8中Option元素未设value时Select将获取空字符串
Apr 07 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
Apr 07 Javascript
js和php如何获取当前url的内容
Sep 22 Javascript
JavaScript原生对象之Number对象的属性和方法详解
Mar 13 Javascript
JavaScript中的操作符类型转换示例总结
May 30 Javascript
基于jQuery实现滚动切换效果
Dec 02 Javascript
Bootstrap Table使用整理(一)
Jun 09 Javascript
微信JSAPI Ticket接口签名详解
Jun 28 Javascript
解决vue 引入子组件报错的问题
Sep 06 Javascript
vue实现登陆页面开发实践
May 30 Vue.js
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
15种PHP Encoder的比较
2007/04/17 PHP
php导入导出excel实例
2013/10/25 PHP
php小技巧之过滤ascii控制字符
2014/05/14 PHP
PHP使用CURL_MULTI实现多线程采集的例子
2014/07/29 PHP
Codeigniter中集成smarty和adodb的方法
2016/03/04 PHP
PHP面向对象程序设计之对象生成方法详解
2016/12/02 PHP
php实现留言板功能(会话控制)
2017/05/23 PHP
PHP实现批量修改文件名的方法示例
2019/09/18 PHP
JavaScript DOM 学习第七章 表单的扩展
2010/02/19 Javascript
阻止子元素继承父元素事件具体思路及实现
2013/05/02 Javascript
jQuery中Form相关知识汇总
2015/01/06 Javascript
JavaScript实现16进制颜色值转RGB的方法
2015/02/09 Javascript
JS实现可点击展开与关闭的左侧广告代码
2015/09/02 Javascript
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
2017/03/08 Javascript
微信小程序手势操作之单触摸点与多触摸点
2017/03/10 Javascript
vue项目中实现图片预览的公用组件功能
2018/10/26 Javascript
jquery实现弹窗(系统提示框)效果
2019/12/10 jQuery
JS代码触发事件代码实例
2020/01/02 Javascript
Vue实现Layui的集成方法步骤
2020/04/10 Javascript
教你如何将 Sublime 3 打造成 Python/Django IDE开发利器
2014/07/04 Python
Python合并字符串的3种方法
2015/05/21 Python
在Python dataframe中出生日期转化为年龄的实现方法
2018/10/20 Python
Python图像滤波处理操作示例【基于ImageFilter类】
2019/01/03 Python
对python 树状嵌套结构的实现思路详解
2019/08/09 Python
python线程的几种创建方式详解
2019/08/29 Python
python实现淘宝购物系统
2019/10/25 Python
荷兰最大的儿童服装店:The Kids Republic
2019/04/13 全球购物
自主招生教师推荐信
2014/05/10 职场文书
机关领导查摆四风思想汇报
2014/09/13 职场文书
离职证明标准格式
2014/09/15 职场文书
2016年元旦致辞
2015/08/01 职场文书
公司中层管理培训心得体会
2016/01/11 职场文书
2019教师的学习计划
2019/06/25 职场文书
好段摘抄大全(48句)
2019/08/08 职场文书
python爬虫请求库httpx和parsel解析库的使用测评
2021/05/10 Python
Python OpenCV实现传统图片格式与base64转换
2021/06/13 Python