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 相关文章推荐
不要在cookie中使用特殊字符的原因分析
Jul 13 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
Feb 07 Javascript
javascript在网页中实现读取剪贴板粘贴截图功能
Jun 07 Javascript
使用AOP改善javascript代码
May 01 Javascript
JavaScript实现添加及删除事件的方法小结
Aug 04 Javascript
跟我学习javascript的闭包
Nov 16 Javascript
Perl Substr()函数及函数的应用
Dec 16 Javascript
详解Angular.js指令中scope类型的几种特殊情况
Feb 21 Javascript
浅谈AngularJS中$http服务的简单用法
May 15 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
May 15 Javascript
微信小程序之多列表的显示和隐藏功能【附源码】
Aug 06 Javascript
vue-cli点击实现全屏功能
Mar 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
DISCUZ 分页代码
2007/01/02 PHP
使用PHP计算两个路径的相对路径
2013/06/14 PHP
PHP获取文件的MD5值并判断是否被修改的例子
2014/06/19 PHP
PHPExcel读取EXCEL中的图片并保存到本地的方法
2015/02/14 PHP
PHP实现扎金花游戏之大小比赛的方法
2015/03/10 PHP
PHP实现多文件上传的方法
2015/07/08 PHP
解决PHP Opcache 缓存刷新、代码重载出现无法更新代码的问题
2020/08/24 PHP
jQuery 源代码显示控件 (Ajax加载方式).
2009/05/18 Javascript
JS获取图片实际宽高及根据图片大小进行自适应
2013/08/11 Javascript
javascript中的this详解
2014/12/08 Javascript
angularjs 处理多个异步请求方法汇总
2015/01/06 Javascript
javascript实现支持移动设备画廊
2015/08/24 Javascript
基于javascript实现全屏漂浮广告
2016/03/31 Javascript
jQuery的文档处理程序详解
2016/05/10 Javascript
NodeJS远程代码执行
2016/08/28 NodeJs
js 提交form表单和设置form表单请求路径的实现方法
2016/10/25 Javascript
canvas实现钟表效果
2017/02/13 Javascript
react-router中的属性详解
2017/06/01 Javascript
JavaScript队列函数和异步执行详解
2017/06/19 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
2017/10/25 Javascript
微信小程序使用input组件实现密码框功能【附源码下载】
2017/12/11 Javascript
解析Json字符串的三种方法日常常用
2018/05/02 Javascript
从零开始搭建webpack+react开发环境的详细步骤
2018/05/18 Javascript
nodejs制作小爬虫功能示例
2020/02/24 NodeJs
jQuery中getJSON跨域原理的深入讲解
2020/09/02 jQuery
[09:59]DOTA2-DPC中国联赛2月7日Recap集锦
2021/03/11 DOTA
零基础写python爬虫之打包生成exe文件
2014/11/06 Python
Python中操作MySQL入门实例
2015/02/08 Python
python爬虫爬取网页表格数据
2018/03/07 Python
Python 旋转打印各种矩形的方法
2019/07/09 Python
一些关于python 装饰器的个人理解
2020/08/31 Python
pycharm 多行批量缩进和反向缩进快捷键介绍
2021/01/15 Python
西海岸男士和男童服装:Johnnie-O
2018/03/15 全球购物
新闻专业大学生找工作的自我评价
2013/10/30 职场文书
高中毕业自我评价
2014/02/08 职场文书
幼儿教师师德承诺书
2014/05/23 职场文书