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 相关文章推荐
让ie运行js时提示允许阻止内容运行的解决方法
Oct 24 Javascript
JavaScript 封装一个tab效果源码分享
Sep 15 Javascript
JavaScript 闭包机制详解及实例代码
Oct 10 Javascript
JSON 必知必会 观后记
Oct 27 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
Feb 17 Javascript
vue2.0 axios前后端数据处理实例代码
Jun 30 Javascript
详解Node 定时器
Feb 26 Javascript
微信小程序云开发(数据库)详解
May 17 Javascript
js验证账户名是否重复
May 26 Javascript
jQuery 移除事件的方法
Jun 20 jQuery
Vue如何将页面导出成PDF文件
Aug 17 Javascript
vue插件--仿微信小程序showModel实现模态提示窗功能
Aug 19 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 iconv() : Detected an illegal character in input string
2010/12/05 PHP
Warning: session_destroy() : Trying to destroy uninitialized sessionq错误
2011/06/16 PHP
Linux下CoreSeek及PHP扩展模块的安装
2012/09/23 PHP
php 字符串压缩方法比较示例
2014/01/23 PHP
php文件夹的创建与删除方法
2015/01/24 PHP
PHP 用session与gd库实现简单验证码生成与验证的类方法
2016/11/15 PHP
Ubuntu中支持PHP5与PHP7双版本的简单实现
2018/08/19 PHP
PHP5.6读写excel表格文件操作示例
2019/02/26 PHP
PHP使用 Pear 进行安装和卸载包的方法详解
2019/07/08 PHP
js电信网通双线自动选择技巧
2008/11/18 Javascript
js的表单操作 简单计算器
2011/12/29 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
2012/08/06 Javascript
关于Jquery操作Cookie取值错误的解决方法
2013/08/26 Javascript
AngularJS动态绑定HTML的方法分析
2016/11/07 Javascript
Node.js 8 中的 util.promisify的详解
2017/06/12 Javascript
详解javascript中的babel到底是什么
2018/06/21 Javascript
vue单页应用在页面刷新时保留状态数据的方法
2018/09/21 Javascript
Vuex的API文档说明详解
2020/02/05 Javascript
js实现纯前端压缩图片
2020/11/16 Javascript
Python 40行代码实现人脸识别功能
2017/04/02 Python
python实现随机漫步算法
2018/08/27 Python
Python+OpenCV实现图像融合的原理及代码
2018/12/03 Python
python爬虫 爬取超清壁纸代码实例
2019/08/16 Python
Python随机数函数代码实例解析
2020/02/09 Python
用python给csv里的数据排序的具体代码
2020/07/17 Python
Python析构函数__del__定义原理解析
2020/11/20 Python
python Xpath语法的使用
2020/11/26 Python
瑞典廉价机票预订网站:Seat24
2018/06/19 全球购物
EMU Australia澳大利亚官网:澳大利亚本土雪地靴品牌
2019/07/24 全球购物
俄罗斯外国汽车和国产汽车配件网上商店:Движком
2020/04/19 全球购物
大学生水果店创业计划书
2014/01/28 职场文书
2014年党务公开实施方案
2014/02/27 职场文书
2014年领导班子专项整治整改方案
2014/09/28 职场文书
自荐信格式范文
2015/03/04 职场文书
SQL SERVER中常用日期函数的具体使用
2021/04/08 SQL Server
PHP实现创建以太坊钱包转账等功能
2021/04/21 PHP