基于jquery實現(xiàn)簡潔的分頁控件_

1、基于jquery實現(xiàn)簡潔的分頁控件_ 前臺分頁控件有許多，這里分享我的分頁控件 pagination.js 1.0版本，該控件基于jquery。 先來看一下預(yù)覽效果： 默認狀況下，點擊頁碼會像博客園一樣，在url后面加上#p頁碼。 控件有2個參數(shù)需要留意： 1. beforeRender: 在每個頁碼項呈現(xiàn)前會被調(diào)用，參數(shù)為頁碼的jQuery對象。這個時候我們可以在呈現(xiàn)前做一些處理，例如增加自己的屬性等。默認狀況下，點擊頁碼，會在url后面加上“#p頁碼”，這樣的url并不會刷新頁面。假如我們需要刷新頁面，例如url為，default.aspx?index=頁碼，就可以在這個回調(diào)函數(shù)里處理。

2、2. callback: 點擊頁碼觸發(fā)，參數(shù)為整個options。點擊頁碼并不會發(fā)起ajax懇求，需要自己處理，options.index 就是本次點擊的頁碼。有時候我們的總數(shù)可能會改變，callback 可以將 options 參數(shù)回傳，這里只要重新設(shè)置總數(shù)，然后 return 即可。 具體看調(diào)用例子就明白了。 源代碼： /*分頁控件v1.0 date:2021.08.26 */ (function(window,$) $.fn.pagination = function(options) var _dftOpts = count:0,/總數(shù) size:10,/每頁數(shù)量 index:1,/當(dāng)

3、前頁 lrCount:5,/當(dāng)前頁左右最多顯示的數(shù)量 lCount:0,/最開頭預(yù)留的數(shù)量 rCount:0,/最終預(yù)留的數(shù)量 first:首頁, last:尾頁, before:上一頁, next:下一頁, callback:null,/點擊大事 beforeRender:null/項呈現(xiàn)前 ; $.extend(_dftOpts,options); var count = _dftOpts.count; if(count = 0) return; var _ellipsis = .; var _size = _dftOpts.size 0 ? (_dftOpts.size count ?

4、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 = _df

5、tOpts.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;

6、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

7、? 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

8、); /連續(xù)部分 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)

9、; 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; func

10、tion 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); v

11、ar 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.

12、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(disa

13、bled) 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

14、_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

15、 = newOpts; jthis.pagination(_dftOpts); ); )(window,$); 樣式： 樣式很簡潔，可以自己調(diào)。 .pagerheight:30px;line-height:30px;font-size: 12px;margin: 25px 0px;text-align: center;color: #2E6AB1;overflow: hidden; .pager aborder:1px solid #9AAFE5;color:#2E6AB1;margin:0px 5px;padding:5px 8px;text-decoration: none; .pager a.hover,.pager a.activebackground-color:#2E6AB1;border-color:#000080;color:#FFF; .pager a.disabledcolor:#C8CDD2;cursor:auto; 用法例子： $(.div1).pagination( count:200, size:10, index:1, lrCount:3, lCount: