前台分页控件有很多，这里分享我的分页控件 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*/(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 ? (_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 _page ? _page - 1 : _dftopts.lcount); var _rcount = _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(jpager); regisiterevent(); return jthis; /*function*/ function initjpager(){ _fromto = getfromto(); var from = _fromto.from; var to = _fromto.to; var before = _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 0){ appendellipsis(); } }else{ for(i = 1;i < from;i++){ appendlink(i); } } //连续部分 for(i = from;i 0){ appendlink(_page); }else if(to 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 _page ? _page : to; return {from:from,to:to}; } function appendlink(index,active){ var ja = $(,{text:index,href:_url+index}); if(active){ ja.addclass(active); } if(_dftopts.beforerender){ _dftopts.beforerender(ja); } jpager.append(ja); } function appendfirstandlast(){ var jfirst = $(,{text:_first}); var jbefore = $(,{text:_before}); var jlast = $(,{text:_last}); var jnext = $(,{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，我会及时修正。
以上就是本文的全部内容，希望对大家的学习有所帮助。