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 相关文章推荐
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
Nov 23 Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
Nov 30 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
May 05 Javascript
将html页面保存成图片,图片写入pdf的实现方法(推荐)
Sep 17 Javascript
canvas实现流星雨的背景效果
Jan 13 Javascript
利用vue和element-ui设置表格内容分页的实例
Mar 02 Javascript
Webpack path与publicPath的区别详解
May 03 Javascript
仿ElementUI实现一个Form表单的实现代码
Apr 23 Javascript
微信小程序实现写入读取缓存详解
Aug 30 Javascript
JS实现简易留言板特效
Dec 23 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
详解JavaScript作用域 闭包
Jul 29 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常用函数小技巧
2008/09/11 PHP
两级联动select刷新后其值保持不变的实现方法
2014/01/27 PHP
PHP闭包实例解析
2014/09/08 PHP
php面向对象程序设计中self与static的区别分析
2019/05/21 PHP
node.js中的url.parse方法使用说明
2014/12/10 Javascript
JQuery.get提交页面不跳转的解决方法
2015/01/13 Javascript
DOM基础教程之使用DOM + Css
2015/01/20 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
2015/11/19 Javascript
js初始化验证实例详解
2016/11/26 Javascript
JavaScript中this的用法实例分析
2016/12/19 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
2017/01/16 Javascript
setTimeout学习小结
2017/02/08 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
2017/02/14 Javascript
nodejs实现邮件发送服务实例分享
2017/03/29 NodeJs
es6在react中的应用代码解析
2017/11/08 Javascript
js 毫秒转天时分秒的实例
2017/11/17 Javascript
select获取下拉框的值 下拉框默认选中方法
2018/02/28 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
2019/06/11 Javascript
es6函数name属性功能与用法实例分析
2020/04/18 Javascript
你准备好迎接vue3.0了吗
2020/04/28 Javascript
python 网络编程详解及简单实例
2017/04/25 Python
python3 发送任意文件邮件的实例
2018/01/23 Python
Django之模型层多表操作的实现
2019/01/08 Python
Python 的字典(Dict)是如何存储的
2019/07/05 Python
python手写均值滤波
2020/02/19 Python
html5通过canvas实现刮刮卡效果示例分享
2014/01/27 HTML / CSS
武汉世纪畅想数字传播有限公司 .NET笔试题
2015/06/13 面试题
Prototype如何为一个Ajax添加一个参数
2015/12/06 面试题
工程类专业自荐信范文
2014/03/09 职场文书
园林设计专业毕业生求职信
2014/03/23 职场文书
毕业典礼主持词大全
2014/03/26 职场文书
祖国在我心中演讲稿600字
2014/05/04 职场文书
财务助理岗位职责范本
2014/10/09 职场文书
小人国观后感
2015/06/11 职场文书
详解JS ES6编码规范
2021/05/07 Javascript
零基础学java之带返回值的方法的定义和调用
2022/04/10 Java/Android