网页分页插件

/**  * jquery.page.rxq.js  * 前端分页控件  * 2016-11-12  *   */ ;(function($){ //定义插件 $.fn.createPage = function(options){ //默认参数 var args = $.extend({ pageCount : 10,//总共的页数 totalCount : 100,//总记录数 current : 1,//当前的页数 backFn : function(){} },options); //执行初始函数 ms.fillHtml($(this),args);//生成dom元素 } var ms = { fillHtml:function(obj,args){ //填充html return (function(){ var html_str = ""; html_str+="<ul>"; html_str+="<span>共"+args.totalCount+"条</span>"; if(args.current>1){//第一页 隐藏上一页 html_str+="<li><a href='javascript:void(0);' class='btn_pg_left'><</a></li>"; } // 不是第一页  第4页以外  且 总数不是4  那么先来显示一个1 if(args.current != 1 && args.current >= 4 && args.pageCount != 4){ html_str+="<li><a href='javascript:void(0);'>"+1+"</a></li>"; } //大于第4页  不是最后一页   if(args.current-2 > 2  && args.current <= args.pageCount && args.pageCount > 5){ html_str+="<li ><a href='javascript:void(0);' class='dot'>...</a></li>"; } //前后偏移2个 var start = args.current -2,end = args.current+2; //开始大于1  当前小于4  或者 当前是第一页 if((start > 1 && args.current < 4)||args.current == 1){ end++; } if(args.current > args.pageCount-4 && args.current >= args.pageCount){ start--; } for (;start <= end; start++) { if(start <= args.pageCount && start >= 1){ if(start != args.current){ html_str+="<li><a href='javascript:void(0);'>"+start+"</a></li>"; }else{ html_str+="<li class='selected'><a href='javascript:void(0);'>"+start+"</a></li>"; } } } if(args.current + 2 < args.pageCount - 1 && args.current >= 1 && args.pageCount > 5){ html_str+="<li ><a href='javascript:void(0);' class='dot'>...</a></li>"; } if(args.current != args.pageCount && args.current < args.pageCount -2  && args.pageCount != 4){ html_str+="<li class='selected'><a href='javascript:void(0);'>"+args.pageCount+"</a></li>"; } if(args.current<args.pageCount){//最后   隐藏下一页 html_str+="<li><a href='javascript:void(0);' class='btn_pg_right'>></a></li>"; } html_str+="</ul>"; obj.html(html_str); ms.bindEvent(obj,args);//生成dom元素 ms.bindCSS(obj); })(); }, //绑定事件 bindEvent:function(obj,args){ return (function(){ //$(selector).on(event,childSelector,data,function,map) obj.find("ul li").on("click",function(){//数字 点击事件 var classname = $(this).find("a").attr("class"); var current = 1; if(classname=="btn_pg_left"){ args.current = args.current-1; }else if(classname=="btn_pg_right"){ args.current = args.current+1; }else if(classname=="dot"){ //啥事不干 return false; }else{ args.current = Number($(this).find("a").text()); } ms.fillHtml(obj,args);//生成dom元素 if(typeof(args.backFn)=="function"){ args.backFn(current); } }); })(); }, //绑定CSS bindCSS:function(obj){ return (function(){ // $("p:first").addClass("intro"); obj.css("margin-right","10px"); obj.css("padding-top","10px"); obj.css("float","right"); obj.find("ul span").css("float","left"); obj.find("ul span").css("margin-right","10px"); obj.find("ul span").css("color","#999"); obj.find("ul span").css("line-height","20px"); obj.find("ul li").css("border","1px solid #ddd"); obj.find("ul li").css("padding","5px 5px 6px 5px"); obj.find("ul li").css("border-radius","3px"); obj.find("ul li").css("cursor","pointer"); obj.find("ul li").css("float","left"); obj.find("ul li").css("margin-left","6px"); obj.find("ul li").css("display","block"); obj.find("ul li").css("font-family","Arial, Helvetica, sans-serif,Microsoft yahei"); obj.find("ul li").css("min-width","9px"); obj.find("ul li").css("height","14px"); obj.find("ul li a").css("text-decoration","none"); obj.find("ul li .btn_pg_left").css("margin-left","auto"); obj.find("ul li .btn_pg_left").css("margin-right","auto"); obj.find("ul li .btn_pg_left").css("display","inline-block"); obj.find("ul li .btn_pg_left").css("width","100%"); obj.find("ul li .btn_pg_left").css("height","10px"); obj.find("ul li .btn_pg_right").css("margin-left","auto"); obj.find("ul li .btn_pg_right").css("margin-right","auto"); obj.find("ul li .btn_pg_right").css("display","inline-block"); obj.find("ul li .btn_pg_right").css("width","100%"); obj.find("ul li .btn_pg_right").css("height","10px"); obj.find("ul li.selected").css("border","1px solid #ff7373"); obj.find("ul li:hover").css("border","1px solid #ff7373"); obj.find("ul li:hover a").css("color","#ff7373"); obj.find("ul li.selected").css("background-color","#ff7373"); })(); } } })(jQuery);