JavaScript实现列表分页功能特效

 更新时间:2015年05月15日 11:27:26   投稿:hebedich  
最近在做一个小项目,有时需要制作静态页面网站,而一旦涉及到文章的分页,实现起来非常麻烦,自己又刚入门,对js不是很熟悉,所以就拿来练练手。

最近写了一个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;
  }

以上所述就是本文的全部内容了,希望大家能够喜欢。

相关文章

  • Webpack学习之动态import原理及源码分析

    Webpack学习之动态import原理及源码分析

    这篇文章主要为大家介绍了Webpack学习之动态import原理及源码分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • 原生js滑动轮播封装

    原生js滑动轮播封装

    这篇文章主要为大家详细介绍了原生js滑动轮播封装,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-07-07
  • JavaScript 装逼指南(js另类写法)

    JavaScript 装逼指南(js另类写法)

    如何写JavaScript才能逼格更高呢?怎样才能、让别人一眼看出你不简单呢?是否很期待别人在看完你的代码之后感叹一句原来还可以这样写呢?下面列出一些在JavaScript时的装逼技巧,也可说是非常实用的写法
    2020-05-05
  • 用JS实现3D球状标签云示例代码

    用JS实现3D球状标签云示例代码

    3D球状标签云的效果想必很多朋友在浏览网页时都有见到过吧,看起来提复杂的,其实实现起来挺容易的,感兴趣的朋友可以了解下本文
    2013-12-12
  • JS替换字符串中空格方法

    JS替换字符串中空格方法

    这篇文章主要介绍了JS替换字符串中&nbsp方法,非常的简单实用,附上各种示例代码,有需要的小伙伴可以参考下。
    2015-04-04
  • javascript跨域请求包装函数与用法示例

    javascript跨域请求包装函数与用法示例

    这篇文章主要介绍了javascript跨域请求包装函数与用法,结合实例形式分析了javascript基于ajax的跨域请求封装函数与相关使用技巧,需要的朋友可以参考下
    2016-11-11
  • js动态修改表格行colspan列跨度的方法

    js动态修改表格行colspan列跨度的方法

    这篇文章主要介绍了js动态修改表格行colspan列跨度的方法,实例分析了javascript动态修改html中table属性的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • js输入中文效果

    js输入中文效果

    js输入中文效果...
    2006-09-09
  • 基于纯JS实现多张图片的懒加载Lazy过程解析

    基于纯JS实现多张图片的懒加载Lazy过程解析

    这篇文章主要介绍了基于纯JS实现多张图片的懒加载Lazy过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-10-10
  • 一篇文章详解JS的四种异步解决方案

    一篇文章详解JS的四种异步解决方案

    异步在JS中是常用的,下面这篇文章主要给大家介绍了关于JS四种异步解决方案的相关资料,文中通过代码介绍的非常详细,对大家学习或者使用js具有一定的参考借鉴价值,需要的朋友可以参考下
    2024-06-06

最新评论