基于jquery实现简单的分页控件_jquery_脚本之家

基于jquery实现简单的分页控件_jquery_脚本之家。前台分页控件有很多,这里分享我的分页控件 pagination.js
1.0版本,该控件基于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*/{ $.fn.pagination = function{ var _dftOpts = { count:0,//总数 size:10,//每页数量 index:1,//当前页 lrCount:5,//当前页左右最多显示的数量 lCount:0,//最开始预留的数量 rCount:0,//最后预留的数量 first:"首页", last:"尾页", before:"上一页", next:"下一页", callback:null,//点击事件 beforeRender:null//项呈现前 }; $.extend; var count = _dftOpts.count; if return; var _ellipsis = "..."; var _size = _dftOpts.size > 0 ? (_dftOpts.size > count ? count : _dftOpts.size) : 1; var _page = Math.ceil; var _index = _dftOpts.index > 0 ? (_dftOpts.index > _page ? _page : _dftOpts.index) : 1; var _lrcount = _dftOpts.lrCount * 2 + 1 > _page ? parseInt : _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 = $("",{"class":"pager"}); initJPager(); jthis.append; 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; }else if{ for(i = 0;i < _lCount;i++){ appendLink; } if{ appendEllipsis(); } }else{ for{ appendLink; } } //连续部分 for{ if{ appendLink; }else{ appendLink; } } //后 if(to === beforeLast && _rCount > 0){ appendLink; }else if{ if{ appendEllipsis(); } for(i = _page - _rCount;i < _page;i++){ appendLink; } }else{ for{ appendLink; } } appendFirstAndLast(); } function GetFromTo(){ var from,to; from = _index - _lrcount; if{ 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{ var jA = $("",{text:index,href:_url+index}); if{ jA.addClass; } if(_dftOpts.beforeRender){ _dftOpts.beforeRender; } jPager.append; } function appendFirstAndLast(){ var jFirst = $; var jBefore = $; var jLast = $; var jNext = $; jPager.append; jBefore.insertBefore.first; jFirst.insertBefore; if{ jFirst.addClass; jBefore.addClass; }else{ jFirst.attr; jBefore.attr("href",_url+; } if{ jLast.addClass; jNext.addClass; }else{ jLast.attr; jNext.attr("href",_url+; } } function appendEllipsis(){ jPager.append; } //event function regisiterEvent(){ jPager.on("mouseenter","a",function(){ var jthis = $; if(!jthis.hasClass && !jthis.hasClass{ jthis.addClass.on("mouseout","a",function(){ var jthis = $; if(!jthis.hasClass{ jthis.removeClass.on("click","a",function(){ var jItem = $; if(jItem.hasClass{ return; } var text = jItem.text(); var index = 0; switch{ 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; break; } var callback = _dftOpts.callback; var newOpts; _dftOpts.index = index; jPager.remove{ newOpts = callback; } if{ _dftOpts = newOpts; } jthis.pagination;样式很简单,可以自己调。.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;}

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

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

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注