基于jquery实现简单的分页控件


Posted in Javascript onMarch 17, 2016

前台分页控件有很多,这里分享我的分页控件 pagination.js 1.0版本,该控件基于jquery。

先来看一下预览效果:

基于jquery实现简单的分页控件

默认情况下,点击页码会像博客园一样,在url后面加上"#p页码"。

控件有2个参数需要注意:

1. beforeRender: 在每个页码项呈现前会被调用,参数为页码的jQuery对象。这个时候我们可以在呈现前做一些处理,例如增加自己的属性等。默认情况下,点击页码,会在url后面加上“#p页码”,这样的url并不会刷新页面。如果我们需要刷新页面,例如url为,"default.aspx?index=页码",就可以在这个回调函数里处理。

2. callback: 点击页码触发,参数为整个options。点击页码并不会发起ajax请求,需要自己处理,options.index 就是本次点击的页码。有时候我们的总数可能会变化,callback 可以将 options 参数回传,这里只要重新设置总数,然后 return 即可。

具体看调用例子就明白了。

源代码:

/*分页控件v1.0
 date:2015.08.26
*/
(function(window,$){
  $.fn.pagination = function(options){
    var _dftOpts = {
      count:0,//总数
      size:10,//每页数量
      index:1,//当前页
      lrCount:5,//当前页左右最多显示的数量
      lCount:0,//最开始预留的数量
      rCount:0,//最后预留的数量
      first:"首页",
      last:"尾页",
      before:"上一页",
      next:"下一页",     
      callback:null,//点击事件
      beforeRender:null//项呈现前
    };
    $.extend(_dftOpts,options);
    var count = _dftOpts.count;
    if(count <= 0) return;
    var _ellipsis = "...";
    var _size = _dftOpts.size > 0 ? (_dftOpts.size > count ? count : _dftOpts.size) : 1;
    var _page = Math.ceil(count / _size);
    var _index = _dftOpts.index > 0 ? (_dftOpts.index > _page ? _page : _dftOpts.index) : 1;
    var _lrcount = _dftOpts.lrCount * 2 + 1 > _page ? parseInt((_page - 1) / 2) : _dftOpts.lrCount;    
    var _continueCount = _lrcount * 2 + 1;
    var _lCount = _dftOpts.lCount <= 0 ? 0 : (_dftOpts.lCount > _page ? _page - 1 : _dftOpts.lCount);
    var _rCount = _dftOpts.rCount <= 0 ? 0 : (_dftOpts.rCount > _page ? _page - 1 : _dftOpts.rCount);
    var _first = _dftOpts.first;
    var _before = _dftOpts.before;
    var _last = _dftOpts.last;
    var _next = _dftOpts.next;
    var _FromTo;
    var _url = location.pathname + location.search + "#p";
    var jthis = this;
    var jPager = $("<div>",{"class":"pager"});    
    initJPager();    
    jthis.append(jPager);
    regisiterEvent();
    return jthis;
     
    /*function*/    
    function initJPager(){
      _FromTo = GetFromTo();
      var from = _FromTo.from;
      var to = _FromTo.to;
      var before = _index <= 1 ? 1 : _index - 1;
      var next = _index >= _page ? _page : _index + 1;
      var beforeLast = _page - 1;
      var jPrevs,jNexts;
      var i;
          
      //前   
      if(from === 2 && _lCount > 0){
        appendLink(1);
      }else if(from > _lCount + 1){
        for(i = 0;i < _lCount;i++){
          appendLink(i + 1);          
        }
        if(_lCount > 0){
          appendEllipsis();
        }
      }else{        
        for(i = 1;i < from;i++){
          appendLink(i);
        }
      }
       
      //连续部分
      for(i = from;i <= to;i++){
        if(i === _index){              
          appendLink(i,true);
        }else{
          appendLink(i);
        }
      }
       
      //后
      if(to === beforeLast && _rCount > 0){      
        appendLink(_page);
      }else if(to < _page - _rCount){
        if(_rCount > 0){
          appendEllipsis();
        }
        for(i = _page - _rCount;i < _page;i++){
          appendLink(i + 1);
        }
      }else{
        for(i = to;i < _page;i++){
          appendLink(i + 1);
        }
      }
       
      appendFirstAndLast();
    }
    function GetFromTo(){
      var from,to;
      from = _index - _lrcount;
      if(from <= 1){
        return {from:1,to:_continueCount};
      }
      if(_page - _index < _lrcount){
        from = _page - _continueCount + 1;        
        return {from:from,to:_page};
      }
      to = _index + _lrcount;
      to = to > _page ? _page : to;    
      return {from:from,to:to};      
    }    
    function appendLink(index,active){
      var jA = $("<a>",{text:index,href:_url+index});
      if(active){
        jA.addClass("active");
      }
      if(_dftOpts.beforeRender){
        _dftOpts.beforeRender(jA);
      }
      jPager.append(jA);
    }
    function appendFirstAndLast(){
      var jFirst = $("<a>",{text:_first});
      var jBefore = $("<a>",{text:_before});
      var jLast = $("<a>",{text:_last});
      var jNext = $("<a>",{text:_next});
      jPager.append(jNext).append(jLast);
      jBefore.insertBefore(jPager.find("a").first());
      jFirst.insertBefore(jBefore);
      if(_index === 1){
        jFirst.addClass("disabled");
        jBefore.addClass("disabled");
      }else{
        jFirst.attr("href",_url+1);
        jBefore.attr("href",_url+(_index-1));
      }
      if(_index === _page){
        jLast.addClass("disabled");
        jNext.addClass("disabled");
      }else{
        jLast.attr("href",_url+_page);          
        jNext.attr("href",_url+(_index+1));
      }     
    }
    function appendEllipsis(){
      jPager.append(_ellipsis);
    }
    //event
    function regisiterEvent(){
      jPager.on("mouseenter","a",function(){
        var jthis = $(this);
        if(!jthis.hasClass("active") && !jthis.hasClass("disabled")){
          jthis.addClass("hover");
        }
      }).on("mouseout","a",function(){
        var jthis = $(this);
        if(!jthis.hasClass("active")){
          jthis.removeClass("hover");
        }
      }).on("click","a",function(){
        var jItem = $(this);
        if(jItem.hasClass("disabled")){
          return;
        }
        var text = jItem.text();
        var index = 0;
        switch(text){
          case _first:
            index = 1;
            break;
          case _before:
            index = _index - 1;
            break;
          case _last:
            index = _page;
            break;
          case _next:
            index = _index + 1;
            break;
          default:
            index = parseInt(text);
            break;
        }        
        var callback = _dftOpts.callback;
        var newOpts;
        _dftOpts.index = index;
        jPager.remove();
        if(callback){
          newOpts = callback(_dftOpts);
        }
        if(newOpts){
          _dftOpts = newOpts;
        }
        jthis.pagination(_dftOpts);        
      });           
    }
  }
})(window,$);

样式:

样式很简单,可以自己调。

.pager{height:30px;line-height:30px;font-size: 12px;margin: 25px 0px;text-align: center;color: #2E6AB1;overflow: hidden;}
.pager a{border:1px solid #9AAFE5;color:#2E6AB1;margin:0px 5px;padding:5px 8px;text-decoration: none;}
.pager a.hover,.pager a.active{background-color:#2E6AB1;border-color:#000080;color:#FFF;}
.pager a.disabled{color:#C8CDD2;cursor:auto;}

使用例子:

$(".div1").pagination({
   count:200,
   size:10,
   index:1,
   lrCount:3,
   lCount:1,
   rCount:1,     
   callback:function(options){
     //alert(options.index);     
     //options.count = 300;
     //return options;
   },
   beforeRender:function(jA){
     //jA.attr("href","default.aspx?index="+jA.text());
   }  
 });

pagination.js 1.0 还有可能还有一些不足和bug,我会及时修正。

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
Javascript调试工具(下载)
Jan 09 Javascript
JQUBar 基于JQUERY的柱状图插件
Nov 23 Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
Dec 30 Javascript
浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
Jun 11 Javascript
node.js中的fs.fchown方法使用说明
Dec 16 Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
Feb 03 Javascript
jQuery简单实现遍历数组的方法
Apr 14 Javascript
JavaScript  cookie 跨域访问之广告推广
Apr 20 Javascript
JS获取当前页面名称的简单实例
Aug 19 Javascript
基于jQuery实现照片墙自动播放特效
Jan 12 Javascript
详解微信小程序之一键复制到剪切板
Apr 24 Javascript
使用webpack搭建vue环境的教程详解
Dec 31 Javascript
jQuery实现图片局部放大镜效果
Mar 17 #Javascript
jQuery实现放大镜效果实例代码
Mar 17 #Javascript
node.js使用cluster实现多进程
Mar 17 #Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
Mar 17 #Javascript
Fullpage.js固定导航栏-实现定位导航栏
Mar 17 #Javascript
基于socket.io+express实现多房间聊天
Mar 17 #Javascript
盘点javascript 正则表达式中 中括号的【坑】
Mar 16 #Javascript
You might like
判“新”函数:得到今天与明天的秒数
2006/10/09 PHP
浅析php工厂模式
2014/11/25 PHP
摘自织梦CMS中的图片处理类
2015/08/08 PHP
PHP生成随机字符串实例代码(字母+数字)
2019/09/11 PHP
jQuery.ajax 用户登录验证代码
2010/10/29 Javascript
Jquery知识点一 Jquery的ready和Dom的onload的区别
2011/01/15 Javascript
JS获取后台Cookies值的小例子
2013/03/04 Javascript
nodejs中的fiber(纤程)库详解
2015/03/24 NodeJs
解决jQuery uploadify在非IE核心浏览器下无法上传
2015/08/05 Javascript
微信小程序 地图(map)实例详解
2016/11/16 Javascript
利用VUE框架,实现列表分页功能示例代码
2017/01/12 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
2017/03/25 Javascript
bootstrap模态框远程示例代码分享
2017/05/22 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
2017/08/31 Javascript
微信小程序引用iconfont图标的方法
2018/10/22 Javascript
解决Can't find variable: SockJS vue项目的问题
2020/09/22 Javascript
python如何实现excel数据添加到mongodb
2015/07/30 Python
python的socket编程入门
2018/01/29 Python
Python判断是否json是否包含一个key的方法
2018/12/31 Python
解决Python selenium get页面很慢时的问题
2019/01/30 Python
如何用Python制作微信好友个性签名词云图
2019/06/28 Python
将Python文件打包成.EXE可执行文件的方法
2019/08/11 Python
Django rest framework分页接口实现原理解析
2020/08/21 Python
详解pycharm配置python解释器的问题
2020/10/15 Python
python 爬取英雄联盟皮肤并下载的示例
2020/12/04 Python
用python制作个视频下载器
2021/02/01 Python
HTML5 input元素类型:email及url介绍
2013/08/13 HTML / CSS
Sunglasses Shop丹麦:欧洲第一的太阳镜在线销售网站
2017/10/22 全球购物
Opodo英国旅游网站:预订廉价航班、酒店和汽车租赁
2018/07/14 全球购物
安全的后院和健身蹦床:JumpSport
2019/07/15 全球购物
酒店采购员岗位职责
2014/03/14 职场文书
学习雷锋活动总结
2014/04/29 职场文书
基层党员对照检查材料
2014/09/24 职场文书
2014年党风建设工作总结
2014/11/19 职场文书
eval(cmd)与eval($cmd)的区别与联系
2021/07/07 PHP
进行数据处理的6个 Python 代码块分享
2022/04/06 Python