首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

javascript实现简单的分页特效

Posted in Javascript onAugust 12, 2015

下面是一段javascript实现的分页代码，当然必须要结合后台代码实现。大家可以自行分析一下代码，希望能够给大家带来一定的帮助,代码如下:

<script type="text/javascript">
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 //当前页数 
 }) 
} 
</script>

示例二：

<html>
<head>
<style type="text/css">
body{
 font-size:12px;
}
</style>
</head>
<body>
<input type="button" value="分页" onclick="initializePageNav(1)">
<div id="pageDir"></div>
<script language="JavaScript">
<!--
function initializePageNav(iCurrPage)
{
 var iPageSize = 20;
 var iProCount = 2121;
 var b = ((iProCount%iPageSize)!=0);
 var iPageCount = parseInt(iProCount/iPageSize)+(b?1:0);
 if (iCurrPage > iPageCount) return false;
 iCurrPage = parseInt(iCurrPage);
 var sTemp = "";
 var sTemp1 = "每页:"+ iPageSize +"/<span style='color:red'>"+ iProCount +"</span>条 页数:<span style='color:blue'>"+ iCurrPage +"</span>/"+ iPageCount +"页";
 var sTemp2 = "<input type=\"text\" id=\"goPageNo\" value=\""+iCurrPage+"\" size=\"3\" /><input type=\"button\" value=\"GO\" onclick=\"initializePageNav($('goPageNo').value);\" />"
 if (iProCount==0)
 {
 sTemp = "<font color='#cccccc'>首页 上一页 下一页 末页</font>";
 }
 else if (iPageCount==1)
 {
 sTemp = "<font color='#cccccc'>首页 上一页 下一页 末页</font>"
 }
 else if (iPageCount==iCurrPage)
 {
 sTemp = "<a href='Javascript:initializePageNav(1)'>首页</a> <a href='Javascript:initializePageNav("+(iPageCount-1)+")'>上一页</a> <font color='#cccccc'>下一页 末页</font>"
 }
 else if (iCurrPage==1)
 {
 sTemp = "<font color='#cccccc'>首页 上一页 </font><a href='Javascript:initializePageNav("+(iCurrPage+1)+")'>下一页</a> <a href='Javascript:initializePageNav("+iPageCount+")'>末页</a>"
 }
 else
 {
 sTemp = "<a href='Javascript:initializePageNav(1)'>首页</a> <a href='Javascript:initializePageNav("+(iCurrPage-1)+")'>上一页</a> <a href='Javascript:initializePageNav("+(iCurrPage+1)+")'>下一页</a> <a href='Javascript:initializePageNav("+(iPageCount)+")'>末页</a>"
 }
 $("pageDir").innerHTML = sTemp +" "+ sTemp2 + " " + sTemp1 ;
 CollectGarbage();
}
function $(o)
{
 return document.getElementById(o);
}
initializePageNav(1)
//-->
</script>
</body>
</html>

示例三：

实现的效果是：上一页、第一页、…（上n个页码）、n个页码、…（下n个页码）、最后一页、下一页。n可以是奇数也可以是偶数，一般都喜欢取奇数

//总页数，当前页数，跳转地址，第一页和最后一页之间显示的页码数量
function pageBar(tp,cp,url,pn){
  var str = ‘<ul class=”page”>';
  if(tp>1 && cp>1){
   var prev = cp-1;
   str += ‘<li><a class=”prev” title=”上一页” href=”javascript:goPage(‘+prev+‘,\”+url+‘\');”><span>上一页</span></a></li> ‘;
  }else{
   str += ‘<li><a class=”prev” title=”上一页” href=”javascript:void(0);”><span>上一页</span></a></li> ‘;
  }
  if(tp>1){
   //第一页
   if(cp==1){
    str +=‘<li class=”current”><a href=”javascript:goPage(1,\”+url+‘\');”><span>1</span></a></li> ‘;
   }else{
    str +=‘<li><a href=”javascript:goPage(1,\”+url+‘\');”><span>1</span></a></li> ‘;
   }

   if(tp>2){
    var pnh = Math.floor(pn/2);

    //循环开始页码
    var s = cp-pnh;
    if(s<=1){
     s = 2;
    }

    //循环结束页码
    var e = cp+pnh;
    if(e>=tp){
     e = tp-1;
    }

    if(s<=(1+pnh)){
     if(tp>(pn+2)){
      e = s+(pn-1);
      if(e>=tp){
       e = tp-1;
      }
     }else{
      s = 2;
     }
    }

    if(e>=(tp-pnh)){
     if(tp>(pn+2)){
      s = e-(pn-1);
      if(s<=1){
       s = 2;
      }
     }else{
      e = tp-1;
     }
    }

    if(e<s){
     e = s;
    }

    //第一页后的多页跳转
    if(s>2){
     var sp = cp-pn;
     if(sp<1){
      sp=1;
     }
     str += ‘<li><a name=”break” href=”javascript:goPage(‘+sp+‘,\”+url+‘\');”><span>…</span></a></li> ‘;
    }

    for(var i=s;i<=e;i++){
     if(i==cp){
      str += ‘<li class=”current”><a href=”javascript:goPage(‘+i+‘,\”+url+‘\');”><span>'+i+‘</span></a></li> ‘;
     }else{
      str += ‘<li><a href=”javascript:goPage(‘+i+‘,\”+url+‘\');”><span>'+i+‘</span></a></li> ‘;
     }
    }

    //最后一页前的多页跳转
    if(e < (tp-1)){
     var ep = cp+pn;
     if(ep>tp){
      ep=tp;
     }
     str += ‘<li><a name=”break” href=”javascript:goPage(‘+ep+‘,\”+url+‘\');”><span>…</span></a></li> ‘;
    }
   }

   //最后一页
   if(cp==tp){
    str +=‘<li class=”current”><a href=”javascript:goPage(‘+tp+‘,\”+url+‘\');”><span>'+tp+‘</span></a></li> ‘;
   }else{
    str +=‘<li><a href=”javascript:goPage(‘+tp+‘,\”+url+‘\');”><span>'+tp+‘</span></a></li> ‘;
   }

  }else{
   str +=‘ <li class=”current”><a href=”javascript:void(0);”><span>1</span></a></li> ‘;
  }

  if(tp>1 && cp<tp){
   var next = cp+1;
   str += ‘<li><a class=”next” title=”下一页” href=”javascript:goPage(‘+next+‘,\”+url+‘\');”><span>下一页</span></a></li>';
  }else{
   str += ‘<li><a class=”next” title=”下一页” href=”javascript:void(0);”><span>下一页</span></a></li>';
  }
  str += ‘</ul>';
  return str;
 }

 //跳转页码，跳转地址
 function goPage(cp,url){
  window.location.href = url+cp;
 }

javascript实现简单的分页特效

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript的变量作用域深入理解
Oct 25 Javascript
jquery自定义下拉列表示例
Apr 25 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
Aug 31 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
Oct 29 Javascript
JS实现动画兼容性的transition和transform实例分析
Dec 13 Javascript
利用 spin.js 生成等待效果(js 等待效果)
Jun 25 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 jQuery
Node.js Event Loop各阶段讲解
Mar 08 Javascript
javascript使用链接跨域下载图片
Nov 01 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
Jan 03 Javascript
基于Vue+Webpack拆分路由文件实现管理
Nov 16 Javascript
使用typescript快速开发一个cli的实现示例
Dec 09 Javascript
JavaScript实现网站访问次数统计代码
Aug 12 #Javascript
jquery+ajax请求且带返回值的代码
Aug 12 #Javascript
javascript封装简单实现方法
Aug 11 #Javascript
基于Css3和JQuery实现打字机效果
Aug 11 #Javascript
js实现获取当前时间是本月第几周的方法
Aug 11 #Javascript
js判断子窗体是否关闭的方法
Aug 11 #Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
Aug 11 #Javascript
实习报告(1) 发烧友(1) AM(1) 频偏(1) 数调机(1) 鉴频器(1) 高放电路(1) 电路(15) 频率(1) 灵敏度(1)
You might like
基于PHP开发中的安全防范知识详解
2013/06/06 PHP
php合并数组中相同元素的方法
2014/11/13 PHP
浅析PHP文件下载原理
2014/12/25 PHP
理解PHP中的Session及对Session有效期的控制
2016/01/08 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
php数据结构之顺序链表与链式线性表示例
2018/01/22 PHP
DWR实现模拟Google搜索效果实现原理及代码
2013/01/30 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
2013/07/09 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果（两种方法）
2015/08/20 Javascript
限制复选框最多选择项的实现代码
2016/05/30 Javascript
微信小程序实现轮播图效果
2017/09/07 Javascript
jQuery实现html双向绑定功能示例
2017/10/09 jQuery
Angular5中调用第三方库及jQuery的添加的方法
2018/06/07 jQuery
浅析vue中的MVVM实现原理
2019/03/04 Javascript
jQuery 选择器用法实例分析【prev + next】
2020/05/22 jQuery
vue实现员工信息录入功能
2020/06/11 Javascript
vue+iview分页组件的封装
2020/11/17 Vue.js
Python and、or以及and-or语法总结
2015/04/14 Python
Python实现查找系统盘中需要找的字符
2015/07/14 Python
基于Python的XSS测试工具XSStrike使用方法
2017/07/29 Python
Python2/3中urllib库的一些常见用法
2017/12/19 Python
python 自动轨迹绘制的实例代码
2019/07/05 Python
在Pycharm中调试Django项目程序的操作方法
2019/07/17 Python
python实现统计代码行数的小工具
2019/09/19 Python
Python tkinter常用操作代码实例
2020/01/03 Python
Python多线程获取返回值代码实例
2020/02/17 Python
Matplotlib使用字符串代替变量绘制散点图的方法
2020/02/17 Python
Ubuntu16安装Python3.9的实现步骤
2020/12/15 Python
serialVersionUID具有什么样的特征
2014/02/20 面试题
铭立家具面试题
2012/12/06 面试题
农民工工资发放承诺书
2014/03/31 职场文书
幼儿园六一亲子活动方案
2014/08/26 职场文书
投诉书范文
2015/07/02 职场文书
吧主申请感言怎么写
2015/08/03 职场文书
互联网创业商业模式以及赚钱法则有哪些？
2019/10/12 职场文书
Web应用开发TypeScript使用详解
2022/05/25 Javascript