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 组合form元素为json格式,asp.net反序列化
Jul 09 Javascript
jquery mobile实现拨打电话功能的几种方法
Aug 05 Javascript
JS实现图片横向滚动效果示例代码
Sep 04 Javascript
jquery插件uploadify实现带进度条的文件批量上传
Dec 13 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
Sep 02 Javascript
ES6中Iterator与for..of..遍历用法分析
Mar 31 Javascript
vue.js 获取当前自定义属性值
Jun 01 Javascript
jQuery回调方法使用示例
Jun 26 jQuery
vue富文本框(插入文本、图片、视频)的使用及问题小结
Aug 17 Javascript
Vue.js 十五分钟入门图文教程
Sep 12 Javascript
JS实现的点击按钮图片上下滚动效果示例
Jan 28 Javascript
vue多页面项目中路由使用history模式的方法
Sep 23 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
彻底删除thinkphp3.1案例blog标签的方法
2014/12/05 PHP
smarty实现多级分类的方法
2014/12/05 PHP
php获取Google机器人访问足迹的方法
2015/04/15 PHP
PHP实现提高SESSION响应速度的几种方法详解
2019/08/09 PHP
PhpStorm+xdebug+postman调试技巧分享
2020/09/15 PHP
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
2013/11/20 Javascript
用JS实现3D球状标签云示例代码
2013/12/01 Javascript
javascript中的循环语句for语句深入理解
2014/04/04 Javascript
使用jsonp完美解决跨域问题
2014/11/27 Javascript
jquery实现多屏多图焦点图切换特效的方法
2015/05/04 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
2016/04/27 Javascript
轮播的简单实现方法
2016/07/28 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
2016/08/20 Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
2017/07/12 jQuery
JavaScript编写的网页小游戏,很给力
2017/08/18 Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
2018/01/07 Javascript
React注册倒计时功能的实现
2018/09/06 Javascript
iView框架问题整理小结
2018/10/16 Javascript
Javascript中parseInt的正确使用方式
2018/10/17 Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
2019/01/19 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
2019/01/23 Javascript
Node.js 在本地生成日志文件的方法
2020/02/07 Javascript
Python模拟脉冲星伪信号频率实例代码
2018/01/03 Python
python中的二维列表实例详解
2018/06/19 Python
django 实现电子支付功能的示例代码
2018/07/25 Python
python运用pygame库实现双人弹球小游戏
2019/11/25 Python
Tensorflow中批量读取数据的案列分析及TFRecord文件的打包与读取
2020/06/30 Python
葡萄牙航空官方网站:TAP Air Portugal
2019/10/31 全球购物
如何写出高性能的JSP和Servlet
2013/01/22 面试题
宣传保护环境的公益广告词
2014/03/13 职场文书
村支部书记群众路线对照检查材料思想汇报
2014/10/08 职场文书
2015年班级元旦晚会活动总结
2014/11/28 职场文书
考勤制度通知
2015/04/25 职场文书
centos8安装MongoDB的详细过程
2021/10/24 MongoDB
WebRTC记录音视频流(web技术分享)
2022/02/24 Javascript
Hive HQL支持2种查询语句风格
2022/06/25 数据库