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 相关文章推荐
json简单介绍
Jun 10 Javascript
基于jQuery的Spin Button自定义文本框数值自增或自减
Jul 17 Javascript
js change,propertychange,input事件小议
Dec 20 Javascript
学习从实践开始之jQuery插件开发 对话框插件开发
Apr 26 Javascript
jquery 缓存问题的几个解决方法
Nov 11 Javascript
jquery 提示信息显示后自动消失的具体实现
Dec 18 Javascript
javascript向后台传送相同属性的参数即数组参数
Feb 17 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
Aug 11 Javascript
JS加密插件CryptoJS实现AES加密操作示例
Aug 16 Javascript
小程序点击图片实现png转jpg
Oct 22 Javascript
Element实现动态表格的示例代码
Aug 02 Javascript
Vue中Object.assign清空数据报错的解决方案
Mar 03 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
php GUID生成函数和类
2014/03/10 PHP
PHP实现自动识别Restful API的返回内容类型
2015/02/07 PHP
laravel中短信发送验证码的实现方法
2018/04/25 PHP
实现laravel 插入操作日志到数据库的方法
2019/10/11 PHP
Js的MessageBox
2006/12/03 Javascript
jQuery学习基础知识小结
2010/11/25 Javascript
JavaScript 对任意元素,自定义右键菜单的实现方法
2013/05/08 Javascript
node.js中的http.createServer方法使用说明
2014/12/14 Javascript
JavaScript学习笔记之基础语法
2015/01/22 Javascript
JS实现随机乱撞彩色圆球特效的方法
2015/05/05 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
2016/10/16 Javascript
微信小程序链接传参并跳转新页面
2016/11/29 Javascript
bootstrap模态框远程示例代码分享
2017/05/22 Javascript
微信小程序倒计时功能实现代码
2017/11/09 Javascript
angularjs数组判断是否含有某个元素的实例
2018/02/27 Javascript
Puppeteer 爬取动态生成的网页实战
2018/11/14 Javascript
在vue项目中引入vue-beauty操作方法
2019/02/11 Javascript
webpack中如何加载静态文件的方法步骤
2019/05/18 Javascript
ckeditor一键排版功能实现方法分析
2020/02/06 Javascript
Vue初始化中的选项合并之initInternalComponent详解
2020/06/11 Javascript
Tornado Web服务器多进程启动的2个方法
2014/08/04 Python
Nginx搭建HTTPS服务器和强制使用HTTPS访问的方法
2015/08/16 Python
Python首次安装后运行报错(0xc000007b)的解决方法
2016/10/18 Python
浅析Windows 嵌入python解释器的过程
2019/07/26 Python
python 遍历pd.Series的index和value
2019/11/26 Python
pytorch掉坑记录:model.eval的作用说明
2020/06/23 Python
Python读取ini配置文件传参的简单示例
2021/01/05 Python
深入解析HTML5的IndexedDB索引数据库
2015/09/14 HTML / CSS
Weekendesk意大利:探索多种引人入胜的周末主题
2016/10/14 全球购物
日本著名化妆品零售网站:Cosme Land
2019/03/01 全球购物
酷瑞网络科技面试题
2012/03/30 面试题
探亲邀请信范文
2014/01/30 职场文书
员工考核评语大全
2014/04/26 职场文书
交通违章检讨书
2014/09/21 职场文书
单位接收函格式
2015/01/30 职场文书
演讲开场白和结束语
2015/05/29 职场文书