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 日期转换成中文格式的函数
Jul 07 Javascript
JS 巧妙获取剪贴板数据 Excel数据的粘贴
Jul 09 Javascript
通过javascript设置css属性的代码
Dec 28 Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
Jul 10 Javascript
jQuery实现图片放大预览实现原理及代码
Sep 12 Javascript
用循环或if语句从json中取数据示例
Aug 18 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
Dec 12 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
Aug 02 Javascript
浅谈js基本数据类型和typeof
Aug 09 Javascript
vue 根据选择条件显示指定参数的例子
Nov 09 Javascript
ElementUI 修改默认样式的几种办法(小结)
Jul 29 Javascript
浅谈javascript事件环微任务和宏任务队列原理
Sep 12 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代码
2010/07/17 PHP
php 注释规范
2012/03/29 PHP
php注销代码(session注销)
2012/05/31 PHP
laravel 5 实现模板主题功能(续)
2015/03/02 PHP
Yii2实现log输出到file及database的方法
2016/11/12 PHP
PHP实现类似题库抽题效果
2018/08/16 PHP
HTML 自动伸缩的表格Table js实现
2009/04/01 Javascript
javascript 命名规则 变量命名规则
2010/02/25 Javascript
js以对象为索引的关联数组
2010/07/04 Javascript
jQuery学习基础知识小结
2010/11/25 Javascript
jquery validate poshytip 自定义样式
2012/11/26 Javascript
推荐10 款 SVG 动画的 JavaScript 库
2015/03/24 Javascript
AngularJS页面访问时出现页面闪烁问题的解决
2016/03/06 Javascript
浅谈js中子页面父页面方法 变量相互调用
2016/08/04 Javascript
详解使用angular的HttpClient搭配rxjs
2017/09/01 Javascript
在nginx上部署vue项目(history模式)的方法
2017/12/28 Javascript
AngularJS实现的自定义过滤器简单示例
2019/02/02 Javascript
微信小程序实现Swiper轮播图效果
2019/11/22 Javascript
[59:00]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第一场 3月7日
2021/03/11 DOTA
python使用rabbitmq实现网络爬虫示例
2014/02/20 Python
python实现在字符串中查找子字符串的方法
2015/07/11 Python
Python基于回溯法子集树模板解决旅行商问题(TSP)实例
2017/09/05 Python
Python入门必须知道的11个知识点
2018/03/21 Python
解决python打不开文件(文件不存在)的问题
2019/02/18 Python
pytorch对梯度进行可视化进行梯度检查教程
2020/02/04 Python
python多线程爬取西刺代理的示例代码
2021/01/30 Python
CSS3中的transform属性进行2D和3D变换的基本用法
2016/05/12 HTML / CSS
使用html2canvas将页面转成图并使用用canvas2image下载
2019/04/04 HTML / CSS
Flesh Beauty官网:露华浓集团旗下彩妆品牌
2021/02/15 全球购物
汇智创新科技发展有限公司
2015/12/06 面试题
物业总经理岗位职责
2014/02/28 职场文书
学习2014年全国两会心得体会
2014/03/12 职场文书
临时用工协议书范本
2014/10/29 职场文书
2015夏季作息时间调整通知
2015/04/24 职场文书
小学生禁毒教育心得体会
2016/01/15 职场文书
我家女友可不止可爱呢 公开OP主题曲无字幕动画MV
2022/04/11 日漫