javascript分页代码(当前页码居中)

 更新时间:2012年09月20日 01:33:49   作者:  
昨天看了妙味课堂的 分页视频教程,今天自己参照其思路,自己写了下,并且自己新增了一个显示页码个数的属性 showPageNum
复制代码 代码如下:

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.jb51.net/js/2012/js_page/ 

相关文章

  • 让浏览器崩溃的12行JS代码(DoS攻击分析及防御)

    让浏览器崩溃的12行JS代码(DoS攻击分析及防御)

    现在有一段12行的JavaScript代码,可以让firefox、chrome、safari浏览器崩溃,而且还能让iphone重启、安卓闪退,本文作者对于该12行代码进行了分析解读并且提出了相应的防御办法,欢迎大家一同探讨。有需要的朋友们可以参考借鉴。
    2016-10-10
  • ajaxfileupload.js实现上传文件功能

    ajaxfileupload.js实现上传文件功能

    这篇文章主要为大家详细介绍了ajaxfileupload.js实现上传文件功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-04-04
  • 关于JavaScript对象的动态选择及遍历对象

    关于JavaScript对象的动态选择及遍历对象

    本文为大家介绍下JavaScript对象的两点:动态选择方法及属性、遍历对象属性和方法,需要的朋友可以参考下
    2014-03-03
  • 详解JavaScript对象的深浅复制

    详解JavaScript对象的深浅复制

    从层次上来看,对象的复制可以简单地分为浅复制和深复制,顾名思义,浅复制是指只复制一层对象的属性,不会复制对象中的对象的属性,对象的深复制会复制对象中层层嵌套的对象的属性。本文是我在复制对象方面的一些心得总结,由浅复制到深复制,感兴趣的朋友一起学习吧
    2017-03-03
  • VSCode开发TypeScript的实现步骤

    VSCode开发TypeScript的实现步骤

    本文主要介绍了VSCode开发TypeScript的实现步骤,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02
  • 微信小程序实现弹出菜单

    微信小程序实现弹出菜单

    这篇文章主要为大家详细介绍了微信小程序实现弹出菜单功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-07-07
  • js创建子窗口并且回传值示例代码

    js创建子窗口并且回传值示例代码

    本文为大家详细介绍喜爱使用js创建子窗口并且实现回传值的示例,感兴趣的朋友可以参考下哈,希望对大家有所帮助
    2013-07-07
  • 温习Javascript基础语法之词法结构

    温习Javascript基础语法之词法结构

    javascript是一门简单的语言,也是一门复杂的语言。这篇文章主要介绍了温习Javascript基础语法之词法结构的相关资料,需要的朋友可以参考下
    2016-05-05
  • 基于JS实现将JSON数据转换为TypeScript类型声明的工具

    基于JS实现将JSON数据转换为TypeScript类型声明的工具

    在TypeScript 项目中,我们经常需要使用声明一系列的ts类型。然而,手动写的效率实在太低,本文就实现一个工具将 JSON 数据转换为 TypeScript 类型定义,需要的可以参考一下
    2023-04-04
  • Javascript调试脚本的经验之谈

    Javascript调试脚本的经验之谈

    随着用JavaScript编程的深入,你会开始理解那些JavaScript给出的不透明错误信息。一旦你理解了你常犯的一般性错误,你就会很快知道怎样避免它们,这样你写的代码中的错误将越来越少。
    2008-10-10

最新评论