基于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 indexOf函数使用说明
Jul 03 Javascript
jquery中加载图片自适应大小主要实现代码
Aug 23 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
Apr 16 Javascript
jQuery解析json格式数据简单实例
Jan 22 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
Mar 09 Javascript
JS使用正则实现去掉字符串左右空格的方法
Dec 27 Javascript
微信端开发--登录小程序步骤
Jan 11 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
Jan 12 Javascript
js,jq,css多方面实现简易下拉菜单功能
May 13 Javascript
Vue项目webpack打包部署到服务器的实例详解
Jul 17 Javascript
JS数组去重常用方法实例小结【4种方法】
May 28 Javascript
Vue起步(无cli)的啊教程详解
Apr 11 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
简单的PHP图片上传程序
2008/03/27 PHP
thinkphp3.2同时连接两个数据库的简单方法
2019/08/13 PHP
Laravel中正确地返回HTTP状态码方法示例
2019/09/10 PHP
laravel框架实现敏感词汇过滤功能示例
2020/02/15 PHP
JS宝典学习笔记(下)
2007/01/10 Javascript
基础的prototype.js常用函数及其用法
2007/03/10 Javascript
JQuery 插件制作实践 xMarquee插件V1.0
2010/04/02 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
2011/09/29 Javascript
js在IE与firefox的差异集锦
2014/11/11 Javascript
判断浏览器的内核及版本号方法汇总
2015/01/05 Javascript
Bootstrap中data-target 到底是什么
2017/02/14 Javascript
javascript事件的传播基础实例讲解(35)
2017/02/14 Javascript
Bootstrap 3 按钮标签实例代码
2017/02/21 Javascript
详谈AngularJs 控制器、数据绑定、作用域
2017/07/09 Javascript
JavaScript变量类型以及变量作用域详解
2017/08/14 Javascript
js编写简单的聊天室功能
2017/08/17 Javascript
JS+canvas画布实现炫酷的旋转星空效果示例
2019/02/13 Javascript
vue使用websocket的方法实例分析
2019/06/22 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
2019/07/25 Javascript
Nodejs使用archiver-zip-encrypted库加密压缩文件时报错(解决方案)
2019/11/18 NodeJs
js实现随机点名功能
2020/12/23 Javascript
Python访问MySQL封装的常用类实例
2014/11/11 Python
Python的Flask框架中实现分页功能的教程
2015/04/20 Python
在Mac OS上部署Nginx和FastCGI以及Flask框架的教程
2015/05/02 Python
详解Python爬虫的基本写法
2016/01/08 Python
在Python 中实现图片加框和加字的方法
2019/01/26 Python
python lxml中etree的简单应用
2019/05/10 Python
让Django的BooleanField支持字符串形式的输入方式
2020/05/20 Python
关于HTML5的安全问题开发人员需要牢记的
2012/06/21 HTML / CSS
美国知名的摄影器材销售网站:Adorama
2017/02/01 全球购物
出门问问全球官方商城:Tichome音箱和TicWatch智能手表
2017/12/02 全球购物
上海天奕面试题笔试题
2015/04/19 面试题
迟到检讨书800字
2014/01/13 职场文书
计算机专业毕业生自荐信范文
2014/03/06 职场文书
2014学雷锋活动总结
2014/03/09 职场文书
民政局个人整改措施
2014/09/24 职场文书