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中哈希表的几种用法总结
Jan 28 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
Aug 22 Javascript
jQuery使用之处理页面元素用法实例
Jan 19 Javascript
jquery中radio checked问题
Mar 16 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
Jun 02 Javascript
AngularJS表达式讲解及示例代码
Aug 16 Javascript
JS简单获取日期相差天数的方法
Apr 24 Javascript
angular动态删除ng-repaeat添加的dom节点的方法
Jul 20 Javascript
Vue实现typeahead组件功能(非常靠谱)
Aug 26 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
Apr 09 Javascript
微信小程序自定义联系人弹窗
May 26 Javascript
element-ui 弹窗组件封装的步骤
Jan 22 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数据库开发知多少
2006/10/09 PHP
ThinkPHP在Cli模式下使用模板引擎的方法
2015/09/25 PHP
php快速排序原理与实现方法分析
2016/05/26 PHP
PHP身份证校验码计算方法
2016/08/10 PHP
PHP7新特性之抽象语法树(AST)带来的变化详解
2018/07/17 PHP
Javascript 获取链接(url)参数的方法
2009/02/15 Javascript
jquery 插件开发备注
2010/08/27 Javascript
seajs1.3.0源码解析之module依赖有序加载
2012/11/07 Javascript
原生JS实现响应式瀑布流布局
2015/04/02 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
2016/08/23 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
2016/12/09 Javascript
微信小程序 二维码canvas绘制实例详解
2017/01/06 Javascript
微信小程序 参数传递实例代码
2017/03/20 Javascript
HTML5开发Kinect体感游戏的实例应用
2017/09/18 Javascript
security.js实现的RSA加密功能示例
2018/06/06 Javascript
详解mpvue开发微信小程序基础知识
2019/09/23 Javascript
通过实例了解JS执行上下文运行原理
2020/06/17 Javascript
python控制台英汉汉英电子词典
2020/04/23 Python
分享一个常用的Python模拟登陆类
2015/03/29 Python
python创建一个最简单http webserver服务器的方法
2015/05/08 Python
Python网络爬虫实例讲解
2016/04/28 Python
Python数据分析之真实IP请求Pandas详解
2016/11/18 Python
python安装pywin32clipboard的操作方法
2019/01/24 Python
Python零基础入门学习之输入与输出
2019/04/03 Python
Python中asyncio模块的深入讲解
2019/06/10 Python
Python图像处理库PIL的ImageDraw模块介绍详解
2020/02/26 Python
在python中求分布函数相关的包实例
2020/04/15 Python
tensorflow 20:搭网络,导出模型,运行模型的实例
2020/05/26 Python
python利用proxybroker构建爬虫免费IP代理池的实现
2021/02/21 Python
萌新HTML5 入门指南(二)
2020/11/09 HTML / CSS
求职简历的自我评价怎样写好
2013/10/07 职场文书
三年级学生评语
2014/04/23 职场文书
优秀英文求职信范文
2015/03/19 职场文书
不同意离婚答辩状
2015/05/22 职场文书
婚庆开业庆典主持词
2015/06/30 职场文书
关于JS中的作用域中的问题思考分享
2022/04/06 Javascript