首页 / 脚本样式 / JavaScript / 基于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）;}//eventfunction 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（））; } }）;