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 相关文章推荐
jQuery 1.8 Release版本发布了
Aug 14 Javascript
javascript判断机器是否联网的2种方法
Aug 09 Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
Aug 27 Javascript
JS实现程序暂停与继续功能代码解读
Oct 10 Javascript
Node.js抓取中文网页乱码问题和解决方法
Feb 10 Javascript
JavaScript实现cookie的写入、读取、删除功能
Nov 05 Javascript
深入理解jQuery 事件处理
Jun 14 Javascript
jquery自动补齐功能插件flexselect用法示例
Aug 06 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
Nov 01 Javascript
微信小程序实现底部导航
Nov 05 Javascript
js中let能否完全替代IIFE
Jun 15 Javascript
对layui数据表格动态cols(字段)动态变化详解
Oct 25 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中的函数嵌套层数限制分析
2011/06/13 PHP
php输入流php://input使用示例(php发送图片流到服务器)
2013/12/25 PHP
php mysql操作mysql_connect连接数据库实例详解
2016/12/26 PHP
PHP实现微信红包金额拆分试玩的算法示例
2018/04/07 PHP
国外大牛IE版本检测!现在IE都到9了,IE检测代码
2012/01/04 Javascript
js 实现css风格选择器(压缩后2KB)
2012/01/12 Javascript
JS打印gridview实现原理及代码
2013/02/05 Javascript
你必须知道的JavaScript 中字符串连接的性能的一些问题
2013/05/07 Javascript
dwz 如何去掉ajaxloading具体代码
2013/05/22 Javascript
node.js中的fs.link方法使用说明
2014/12/15 Javascript
SpringMVC返回json数据的三种方式
2015/12/10 Javascript
使用Web Uploader实现多文件上传
2016/06/08 Javascript
AngularJS中的缓存使用
2017/01/11 Javascript
js css3实现图片拖拽效果
2017/03/04 Javascript
React Native 使用Fetch发送网络请求的示例代码
2017/12/02 Javascript
angular 实现的输入框数字千分位及保留几位小数点功能示例
2018/06/19 Javascript
JS实现移动端触屏拖拽功能
2018/07/31 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
2019/04/16 Javascript
ES6 class的应用实例分析
2019/06/27 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
2021/01/27 Vue.js
[51:11]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS DT
2014/05/22 DOTA
Python正则表达式介绍
2012/08/06 Python
Python的Django框架中自定义模版标签的示例
2015/07/20 Python
详解Python的Django框架中inclusion_tag的使用
2015/07/21 Python
对python:循环定义多个变量的实例详解
2019/01/20 Python
Python docx库用法示例分析
2019/02/16 Python
Python使用__new__()方法为对象分配内存及返回对象的引用示例
2019/09/20 Python
python将字典内容写入json文件的实例代码
2020/08/12 Python
Python爬虫UA伪装爬取的实例讲解
2021/02/19 Python
来自美国主售篮球鞋的零售商店:KICKSUSA
2017/11/28 全球购物
运动会通讯稿100字
2014/01/31 职场文书
党校培训自我鉴定范文
2014/03/20 职场文书
教师批评与自我批评总结
2014/10/16 职场文书
中学政教处工作总结
2015/08/13 职场文书
8g内存用python读取10文件_面试题-python 如何读取一个大于 10G 的txt文件?
2021/05/28 Python
常用的文件对应的MIME类型汇总
2022/04/26 HTML / CSS