基于bootstrap3和jquery的分页插件

自己写的一款基于bootstrap3和jquery的分页插件，初学jquery插件写法，写的很一般。拿出来献丑了。

rush:js;"> /** * 基于bootstrap3的jquery分页插件 * 调用方式分两种 * 1.直接调用法 * 普通大小 * $.mypage(id,Now,max,fn); * 大尺寸 * $.mypagelg(id,fn); * 小尺寸 * $.mypagesm(id,fn); * * 参数说明：id为放置分页容器的ID，Now为当前页，max为最大页，fn为回掉函数，回掉函数有一个参数为点击的页码 * * 2.选择器调用法 * $(selector).mypage({ * Now:Now,* last:last,* callback:fn,* max:max,* first:first,* style,style * }); * 参数说明：Now为当前页，max为最大页，callback为回掉函数，回掉函数有一个参数为点击的页码，style可选参数，有"big" 和"small"，fitst为首页按钮的文本，last为尾页按钮的文本 * * 当最大页为1时将不显示，当当前页设置小于1时默认为1，当前页大于最大页时默认为最大页 * 引用本js前请先引用jquery的js文件和bootstrap3的css文件 * */ (function ($) { $.fn.mypage = function(options){ var defaults = { Now:1,max:1,callback:null,style:null,first:"«",last:"»" } var options = $.extend(defaults,options); this.each(function(){ options.max=Math.round(options.max); options.Now=Math.round(options.Now); if(options.max<=1||isNaN(options.max)||isNaN(options.Now))return; options.Now=options.Now<1?1:options.now>options.max?options.max:options.Now; var mainBox=$(this).html(""); var page_Box= $("

").addClass("pagination").appendTo(mainBox); if(options.style!=null) page_Box.addClass(options.style=="big"?"pagination-lg":options.style=="small"?"pagination-sm":options.style) var page_back=$("

").appendTo(page_box); if(options.now==1) page_back.addClass("disabled"); else page_back.on("click",function(){if(typeof options.callback === "function")options.callback(1);}) var page_next=$("

"); if(options.Now==options.max) page_next.addClass("disabled"); else page_next.on("click",function(){if(typeof options.callback === "function")options.callback(options.max);}) var page_Now=$("

").addClass("active"); if(options.max<=10) for(var i=1;i<=options.max;i++) $.mypageInsertItem(i,options.now,page_now,page_box,options.callback); else if(options.now<5){ for(var i=1;i<=6;i++) $.mypageInsertItem(i,options.callback); $.mypageInsertOther(page_box); }else if(options.max-options.now<4){ $.mypageInsertOther(page_box); for(var i=options.max-5;i<=options.max;i++) $.mypageInsertItem(i,options.callback); }else{ $.mypageInsertOther(page_box); for(var i=options.now-2;i<=options.now+2;i++) $.mypageInsertItem(i,options.callback); $.mypageInsertOther(page_box); } page_next.appendTo(page_box); }) },$.mypageInsertItem=function(i,fn){ if(i!=now) $("

").on("click",function(){if(typeof fn === "function")fn($(this).text());}).appendTo(page_Box); else page_Now.appendTo(page_Box); },$.mypageInsertOther=function(page_Box){ $("

").addClass("disabled").appendTo(page_Box); },$.mypage=function(id,fn){$("#"+id).mypage({Now:Now,max:max,callback:fn})},$.mypagesm=function(id,callback:fn,style:"pagination-sm"})},$.mypagelg=function(id,style:"pagination-lg"})} })(jQuery);

以上所述就是本文的全部内容了，希望对大家学习jQuery能够有所帮助。