首页
所有分类
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 相关文章推荐
Web 前端设计模式--Dom重构 提高显示性能
Oct 22 Javascript
JavaScript 基础篇之对象、数组使用介绍（三）
Apr 07 Javascript
jQuery中获取Radio元素值的方法
Jul 02 Javascript
JQuery页面地址处理插件jqURL详解
May 03 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
Nov 17 Javascript
js 截取或者替换字符串中的数字实现方法
Jun 13 Javascript
JS访问DOM节点方法详解
Nov 29 Javascript
微信小程序（六）：列表上拉加载下拉刷新示例
Jan 13 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
Jan 13 Javascript
详解Vue.directive 自定义指令
Mar 27 Javascript
React路由鉴权的实现方法
Sep 05 Javascript
ES6扩展运算符和rest运算符用法实例分析
May 23 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
印尼购物网站(37) 阿根廷购物网站(9) 澳大利亚购物网站(309) 台湾购物网站(77) 丹麦购物网站(22) 意大利购物网站(128) 俄罗斯购物网站(137) 肯尼亚购物网站(2) 法国购物网站(144) 埃及购物网站(2)
You might like
mysql5的sql文件导入到mysql4的方法
2008/10/19 PHP
Codeigniter上传图片出现“You did not select a file to upload”错误解决办法
2014/06/12 PHP
在php和MySql中计算时间差的方法详解
2015/03/27 PHP
php序列化函数serialize() 和 unserialize() 与原生函数对比
2015/05/08 PHP
PHP框架Laravel插件Pagination实现自定义分页
2020/04/22 PHP
PHP在线打包下载功能示例
2016/10/15 PHP
JavaScript实现鼠标滑过图片变换效果的方法
2015/04/16 Javascript
node.js调用Chrome浏览器打开链接地址的方法
2017/05/17 Javascript
angular2中使用第三方js库的实例
2018/02/26 Javascript
微信小程序日历/日期选择插件使用方法详解
2018/12/28 Javascript
vue如何限制只能输入正负数及小数
2019/07/04 Javascript
Javascript执行流程细节原理解析
2020/05/14 Javascript
jQuery 动画与停止动画效果实例详解
2020/05/19 jQuery
python 正则式使用心得
2009/05/07 Python
Python中文件遍历的两种方法
2014/06/16 Python
Linux RedHat下安装Python2.7开发环境
2017/05/20 Python
python实现定时提取实时日志程序
2018/06/22 Python
python 根据字典的键值进行排序的方法
2019/07/24 Python
Django实现跨域请求过程详解
2019/07/25 Python
详解Python Opencv和PIL读取图像文件的差别
2019/12/27 Python
Matplotlib使用字符串代替变量绘制散点图的方法
2020/02/17 Python
Python多线程threading join和守护线程setDeamon原理详解
2020/03/18 Python
keras实现多GPU或指定GPU的使用介绍
2020/06/17 Python
利用Python将图片中扭曲矩形的复原
2020/09/07 Python
图解CSS3制作圆环形进度条的实例教程
2016/05/26 HTML / CSS
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
2013/04/24 HTML / CSS
美国购买当代和现代家具网站：MODTEMPO
2018/07/20 全球购物
澳洲网红粉泥面膜：Sand & Sky
2019/08/13 全球购物
软件测试面试题
2014/01/05 面试题
工作鉴定评语
2014/05/04 职场文书
护士节活动总结
2014/08/29 职场文书
2015年全民国防教育日活动总结
2015/03/23 职场文书
我们的节日中秋节活动总结
2015/03/23 职场文书
特种设备安全管理制度
2015/08/06 职场文书
2017新年晚会开幕词
2016/03/03 职场文书
深入浅出讲解Java8函数式编程
2022/01/18 Java/Android