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 相关文章推荐
Ext JS Grid在IE6 下宽度的问题解决方法
Feb 15 Javascript
文本框只能选择数据到文本框禁止手动输入
Nov 22 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
Feb 25 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
Nov 26 Javascript
js css+html实现简单的日历
Jul 14 Javascript
Javascript blur与click冲突解决办法
Jan 09 Javascript
javascript数据结构之串的概念与用法分析
Apr 12 Javascript
详解开源的JavaScript插件化框架MinimaJS
Oct 26 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
Jul 02 Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
vue+echarts实现动态绘制图表及异步加载数据的方法
Oct 17 Javascript
JavaScript修改注册表实例代码
Jan 05 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学习资源和链接.
2006/12/05 PHP
使用PHP函数scandir排除特定目录
2014/06/12 PHP
WordPress迁移时一些常见问题的解决方法整理
2015/11/24 PHP
Javascript实例教程(19) 使用HoTMetal(1)
2006/12/23 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
2013/12/05 Javascript
jquery 选取方法都有哪些
2014/05/18 Javascript
Javascript常用字符串判断函数代码分享
2014/12/08 Javascript
JS实现的页面自定义滚动条效果
2015/10/26 Javascript
JavaScript预解析及相关技巧分析
2016/04/21 Javascript
JavaScript中的Number数字类型学习笔记
2016/05/26 Javascript
Javascript 正则表达式校验数字的简单实例
2016/11/02 Javascript
Vue 兄弟组件通信的方法(不使用Vuex)
2017/10/26 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
2018/03/14 Javascript
javascrit中undefined和null的区别详解
2019/04/07 Javascript
简述ES6新增关键字let与var的区别
2019/08/23 Javascript
Vue中inheritAttrs的使用实例详解
2020/12/31 Vue.js
python del()函数用法
2013/03/24 Python
Python urllib模块urlopen()与urlretrieve()详解
2013/11/01 Python
pyqt和pyside开发图形化界面
2014/01/22 Python
Python中的多重装饰器
2015/04/11 Python
python使用nntp读取新闻组内容的方法
2015/05/08 Python
简单介绍Python的Django框架加载模版的方式
2015/07/20 Python
Python实现的爬虫功能代码
2017/06/24 Python
利用python模拟sql语句对员工表格进行增删改查
2017/07/05 Python
Django学习之文件上传与下载
2019/10/06 Python
如何在Django中使用聚合的实现示例
2020/03/23 Python
详解pycharm的python包opencv(cv2)无代码提示问题的解决
2021/01/29 Python
Boston Proper官网:美国女装品牌
2017/10/30 全球购物
.net软件工程师面试题
2015/03/31 面试题
超市采购员岗位职责
2014/02/01 职场文书
关于梦想的演讲稿
2014/05/05 职场文书
学校食堂标语
2014/10/06 职场文书
2014年街道办事处工作总结
2014/12/11 职场文书
小学生读书笔记范文
2015/06/30 职场文书
2015最新婚礼司仪主持词
2015/06/30 职场文书
Mysql基础之常见函数
2021/04/22 MySQL