css代码:
/*分页*/ .pageList { clear: both; overflow: hidden; } .pageList a, .pageList span { border: 1px solid #ccc; margin-left: 10px; float: left; display: block; overflow: hidden; padding: 3px; font-family: 微软雅黑; font-size: 12px; min-width: 15px; text-align: center; height: 20px; line-height: 20px; cursor: pointer; } .pageList a:hover, .pageList_Current { background-color: #278DE1; color: white; } .pageList .pageList_Hidden { border: none; cursor: default; } .pageList .pageList_Hidden:hover { background-color: transparent; } .pageList input.jumpNum { width: 30px; border: 1px solid #8c8c8c; float: left; width: 20px; height: 20px; margin-left: 5px; line-height: 20px; padding: 3px; text-align: center; } .pageList a.jumpText { border: none; background: none; outline: none; margin-left: 0; text-decoration: none; color: #333; } .pageList a.jumpText:hover { color: #960; }
js插件代码
(function($){ var defaults={ num:10, //页码个数 count:102, //总数 size:10, //每页展示条数 //hiddenPosition:7, page:1, //当前页 clickEvent:function(page){ } }; //重置html function resetHtml(opts,obj,pageCount){ var middlePage=Math.ceil(pageCount/2);//中间页 //var currentPos=0;//当前位置() var i=1,j=0; var n=0; //另一端的页码数 var z=0;//当前页的前一页或后一页 var maxPage=0; var getPageHtml=function(type,page){ var currentPage=""; if(type==1){//省略号 return "<span class='pageList_Hidden'>...</span>"; }else if(type==2){ if(page==opts.page){ currentPage="pageList_Current"; } return "<a class='pageList_Num "+currentPage+"'>" + page + "</a>"; } }; var html="<a class='pageList_FirstPage'><label>首页</label></a>"; html+="<a class='pageList_PrevPage'>上页</a>"; if(pageCount<=opts.num){//没有省略号 for(;i<pageCount;i++){ html+=getPageHtml(2,i); } }else{//有省略号 n=opts.num-4;//剩余页码的坑 if(opts.page<=middlePage){// x+1+3 1是省略号 3是后面几个页码 z=opts.page+1;//当前页的后一页,省略号的前一格 if(z<=n){// for(i=1;i<=n;i++){ html+=getPageHtml(2,i); } }else{ for(i=(z-n+1);i<=z;i++){ html+=getPageHtml(2,i); } } html += getPageHtml(1); for(i=pageCount-2;i<=pageCount;i++){ html+=getPageHtml(2,i); } }else{// 3+1+x 1是省略号 3是前面几个页码 for(i=1;i<=3;i++){ html+=getPageHtml(2,i); } html += getPageHtml(1); //debugger z=opts.page-1;//当前页的前一页,省略号的后一格 maxPage=z+n-1; //maxPage=maxPage>pageCount?pageCount:maxPage; if(maxPage>pageCount){ maxPage=pageCount; z=pageCount-n+1; } for(i=z;i<=maxPage;i++){ html += getPageHtml(2,i); } } } html+="<a class='pageList_NextPage'>下页</a>"; html+="<a class='pageList_LastPage'>末页</a>"; html+="<input class='jumpNum' type='text' value='' />"; html+="<a class='jumpText' href='javascript:void(0)'>跳转</a>"; obj.html(html); //return html; } $.fn.pageList=function(opts){ opts=$.extend({},defaults,opts); this.each(function(){ var obj=$(this).addClass("pageList"); var pageCount=Math.ceil(opts.count/opts.size);//总页数 resetHtml(opts,obj,pageCount); obj.on("click","a.pageList_Num",function(){ var page=parseInt($(this).html()); if(page==opts.page){ return; } opts.page=page; opts.clickEvent(page,function(){ resetHtml(opts,obj,pageCount); }); }); //首页 obj.on("click",".pageList_FirstPage",function(){ var page=parseInt($(".pageList_Current",obj).html()); if(page==1){ return; } opts.page=1; opts.clickEvent(page,function(){ resetHtml(opts,obj,pageCount); }); }); //上页 obj.on("click",".pageList_PrevPage",function(){ var page=parseInt($(".pageList_Current",obj).html())-1; if(page<=0){ return; } opts.page=page; opts.clickEvent(page,function(){ resetHtml(opts,obj,pageCount); }); }); //下一页 obj.on("click",".pageList_NextPage",function(){ var page=parseInt($(".pageList_Current",obj).html())+1; if(page>pageCount){ return; } opts.page=page; opts.clickEvent(page,function(){ resetHtml(opts,obj,pageCount); }); }); //末页 obj.on("click",".pageList_LastPage",function(){ var page=parseInt($(".pageList_Current",obj).html()); if(page==pageCount){ return; } opts.page=pageCount; opts.clickEvent(page,function(){ resetHtml(opts,obj,pageCount); }); }); //文本框enter obj.on("keyup",".jumpNum",function(e){ if(e.which!=13){ return; } var textPage=$(this).val(); if(isNaN(textPage)){ alert("输入的页码必须是数值型"); return; } textPage=parseInt(textPage); var page=parseInt($(".pageList_Current",obj).html()); if(textPage>pageCount||textPage<=0){ alert("您输入的页码超出范围"); return; } if(page==textPage){ return; } opts.page=textPage; opts.clickEvent(page,function(){ resetHtml(opts,obj,pageCount); $(".jumpNum",obj).focus(); }); }); //单击跳转 obj.on("click",".jumpText",function(e){ var textPage=$(".jumpNum",obj).val(); if(isNaN(textPage)){ alert("输入的页码必须是数值型"); return; } textPage=parseInt(textPage); var page=parseInt($(".pageList_Current",obj).html()); if(textPage>pageCount||textPage<=0){ alert("您输入的页码超出范围"); return; } if(page==textPage){ return; } opts.page=textPage; opts.clickEvent(page,function(){ resetHtml(opts,obj,pageCount); $(".jumpNum",obj).focus(); }); }); }); } })(jQuery);
插件调用:
<div class="a"></div> $(function(){ $(".a").pageList({ num:12, //页码个数 count:1020, //总数 size:10, //每页展示条数 page:52, //当前页 clickEvent:function(page,callback){ //alert(page); callback(); } }); });
最终效果: