首页
所有分类
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 相关文章推荐
jquery Mobile入门—外部链接切换示例代码
Jan 08 Javascript
JS小游戏之宇宙战机源码详解
Sep 25 Javascript
JavaScript判断用户是否对表单进行了修改的方法
Mar 18 Javascript
jquery实现的横向二级导航效果代码
Aug 26 Javascript
javascript实现的网站访问量统计代码
Dec 20 Javascript
jQuery的deferred对象使用详解
Sep 25 Javascript
Javascript的动态增加类的实现方法
Oct 20 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
Angular项目从新建、打包到nginx部署全过程记录
Dec 09 Javascript
Vue工程模板文件 webpack打包配置方法
Dec 26 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
Mar 22 Javascript
Element Tooltip 文字提示的使用示例
Jul 26 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) 德劲(5) SONY(15) 短波(1) 天线(6) 发报机(1) 索尼(5) PL-880(1) 电路图(1) ICF-7600(1)
You might like
PHP 截取字符串专题集合
2010/08/19 PHP
jQuery 使用手册(二)
2009/09/23 Javascript
JS+css 图片自动缩放自适应大小
2013/08/08 Javascript
Javascript setInterval的两种调用方法(实例讲解)
2013/11/29 Javascript
你可能不知道的JavaScript的new Function()方法
2014/04/17 Javascript
微信企业号开发之微信考勤Cookies的使用
2015/09/11 Javascript
JS实现简易的图片拖拽排序实例代码
2017/06/09 Javascript
javascript获取指定区间范围随机数的方法
2017/09/08 Javascript
基于zepto.js实现登录界面
2017/10/09 Javascript
浅谈mint-ui 填坑之路
2017/11/06 Javascript
vue+element实现批量删除功能的示例
2018/02/28 Javascript
基于vue-cli npm run build之后vendor.js文件过大的解决方法
2018/09/27 Javascript
从零开始搭建vue移动端项目到上线的步骤
2018/10/15 Javascript
[01:03:09]完美世界DOTA2联赛PWL S2 Forest vs SZ 第二场 11.25
2020/11/26 DOTA
用C++封装MySQL的API的教程
2015/05/06 Python
Python常用内置模块之xml模块(详解)
2017/05/23 Python
Python 将RGB图像转换为Pytho灰度图像的实例
2017/11/14 Python
Python下载网络小说实例代码
2018/02/03 Python
python调用百度语音识别api
2018/08/30 Python
ipython和python区别详解
2019/06/26 Python
linux环境下Django的安装配置详解
2019/07/22 Python
Python中sorted()排序与字母大小写的问题
2020/01/14 Python
在css3中background-clip属性与background-origin属性的用法介绍
2012/11/13 HTML / CSS
HTML5是什么 HTML5是什么意思 HTML5简介
2012/10/26 HTML / CSS
英国豪华装饰照明品牌的在线零售商：Inspyer Lighting
2019/12/10 全球购物
描述JSP和Servlet的区别、共同点、各自应用的范围
2012/10/02 面试题
金融专业大学生自我评价
2014/01/09 职场文书
物理专业本科生自荐信
2014/01/30 职场文书
优秀士兵先进事迹
2014/02/06 职场文书
大专生找工作自荐书
2014/06/10 职场文书
2015年清明节网上祭英烈活动总结
2015/03/26 职场文书
2015年体育部工作总结
2015/04/02 职场文书
复兴之路纪录片观后感
2015/06/02 职场文书
研讨会致辞
2015/07/31 职场文书
Java实战之用Swing实现通讯录管理系统
2021/06/13 Java/Android
React如何创建组件
2021/06/27 Javascript