JavaScript实现列表分页功能特效


Posted in Javascript onMay 15, 2015

最近写了一个js分页的方法,尽管已经有现成的可以用,但还是想自己写写,搞搞清楚。最终实现的效果是:上一页、第一页、…(上n个页码)、n个页码、…(下n个页码)、最后一页、下一页。n可以是奇数也可以是偶数,一般都喜欢取奇数,星石调用的时候传入的参数是5。写的时候,主要注意了以下几个地方:

 页码等于1时,只显示上一页、第一页、最后一页,且都没有跳转;
 页码小于等于2时,不需要中间的n个页码;
 页码小于等于n时,显示所有页码,不显示2个“…”;
 2个“…”换页时,换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 相关文章推荐
jquery photoFrame 图片边框美化显示插件
Jun 28 Javascript
js 立即调用的函数表达式如何写
Jan 12 Javascript
JS检测输入字符是否包含非法字符的示例代码
Feb 11 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
Apr 27 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
Feb 27 Javascript
javascript实现仿百度图片的瀑布流加载效果
Apr 20 Javascript
Jquery $when done then的用法详解
May 20 Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
Jan 15 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
Jul 22 Javascript
vue项目中跳转到外部链接的实例讲解
Sep 20 Javascript
Vue-CLI项目中路由传参的方式详解
Sep 01 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
Mar 04 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
May 15 #Javascript
js生成验证码并直接在前端判断
May 15 #Javascript
javascript实现表格增删改操作实例详解
May 15 #Javascript
javascript实现可全选、反选及删除表格的方法
May 15 #Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
May 15 #Javascript
javascript实现Table排序的方法
May 15 #Javascript
Javascript动态创建表格及删除行列的方法
May 15 #Javascript
You might like
PHP中把stdClass Object转array的几个方法
2014/05/08 PHP
两种设置php载入页面时编码的方法
2014/07/29 PHP
TP3.2批量上传文件或图片 同名冲突问题的解决方法
2017/08/01 PHP
php实现微信公众号创建自定义菜单功能的实例代码
2019/06/11 PHP
JavaScript.Encode手动解码技巧
2010/07/14 Javascript
Jqyery中同等与js中windows.onload的应用
2011/05/10 Javascript
js实现的切换面板实例代码
2013/06/17 Javascript
让浏览器DOM元素最后加载的js方法
2014/07/29 Javascript
node.js中的fs.lstat方法使用说明
2014/12/16 Javascript
JS获取网页图片name属性的方法
2015/04/01 Javascript
jQuery菜单插件用法实例
2015/07/25 Javascript
JavaScript的jQuery库插件的简要开发指南
2015/08/12 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
2015/08/25 Javascript
JavaScript实现的多种鼠标拖放效果
2015/11/03 Javascript
JavaScript入门系列之知识点总结
2016/03/24 Javascript
React Native悬浮按钮组件的示例代码
2018/04/05 Javascript
vue.js中ref和$refs的使用及示例讲解
2019/08/14 Javascript
Vue中使用wangeditor富文本编辑的问题
2021/02/07 Vue.js
OpenCV2.3.1+Python2.7.3+Numpy等的配置解析
2018/01/05 Python
Win8下python3.5.1安装教程
2020/07/29 Python
python输入错误后删除的方法
2019/10/12 Python
Python计算机视觉里的IOU计算实例
2020/01/17 Python
tensorflow模型继续训练 fineturn实例
2020/01/21 Python
简单了解python shutil模块原理及使用方法
2020/04/28 Python
Python 判断时间是否在时间区间内的实例
2020/05/16 Python
keras训练浅层卷积网络并保存和加载模型实例
2020/07/02 Python
matplotlib事件处理基础(事件绑定、事件属性)
2021/02/03 Python
HTML5中的Article和Section元素认识及使用
2013/03/22 HTML / CSS
加拿大当代时尚服饰、配饰和鞋类专业零售商和制造商:LE CHÂTEAU
2017/10/06 全球购物
Lookfantastic希腊官网:英国知名美妆购物网站
2018/09/15 全球购物
北京某科技有限公司C# .net笔试题
2014/09/27 面试题
初中毕业生的自我评价
2014/03/03 职场文书
电子专业毕业生自荐信
2014/05/25 职场文书
老公保证书
2015/01/17 职场文书
家庭经济困难证明
2015/06/23 职场文书
Python使用永中文档转换服务
2022/05/06 Python