I wrote a pagination plugin based on bootstrap3 and jquery. I learned how to write jquery plugin and wrote it very ordinary. Take it out and show off.
/** * jquery paging plugin based on bootstrap3 * There are two ways to call * 1. Direct call method * Normal size * $.mypage(id,now,max,fn); * Large size * $.mypagelg(id,now,max,fn); * Small size * $.mypagesm(id,now,max,fn); * * Parameter description: id is the ID of the paging container, now is the current page, max is the largest page, fn is the return function, and the return function has a parameter as the clicked page number * * 2. Selector call method * $(selector).mypage({ * now:now, * last:last, * callback:fn, * max:max, * first:first, * style, style * }); * Parameter description: now is the current page, max is the largest page, callback is the return function, the return function has a parameter to the clicked page number, style optional parameters, there are "big" and "small", fitst is the text of the home page button, and last is the text of the last page button * * When the maximum page is 1, it will not be displayed. When the current page is set less than 1, it will be 1. When the current page is larger than the maximum page, it will be the maximum page. * Before quoting this js, please refer to the jquery js file and the css file of bootstrap3 * */ (function ($) { $. = function(options){ var defaults = { now:1, max:1, callback:null, style:null, first:"&laquo;", last:"&raquo;" } var options = $.extend(defaults, options); (function(){ =(); =(); if(<=1||isNaN()||isNaN())return; =<1?1:>?:; var mainbox=$(this).html(""); var page_box= $("<ul></ul>").addClass("pagination").appendTo(mainbox); if(!=null) page_box.addClass(=="big"?"pagination-lg":=="small"?"pagination-sm":) var page_back=$("<li><a href=\"javascript:void(0)\">"++"</a></li>").appendTo(page_box); if(==1) page_back.addClass("disabled"); else page_back.on("click",function(){if(typeof === "function")(1);}) var page_next=$("<li><a href=\"javascript:void(0)\">"++"</a></li>"); if(==) page_next.addClass("disabled"); else page_next.on("click",function(){if(typeof === "function")();}) var page_now=$("<li><a href=\"javascript:void(0)\">"++"</a></li>").addClass("active"); if(<=10) for(var i=1;i<=;i++) $.mypageInsertItem(i,,page_now,page_box,); else if(<5){ for(var i=1;i<=6;i++) $.mypageInsertItem(i,,page_now,page_box,); $.mypageInsertOther(page_box); }else if(<4){ $.mypageInsertOther(page_box); for(var i=-5;i<=;i++) $.mypageInsertItem(i,,page_now,page_box,); }else{ $.mypageInsertOther(page_box); for(var i=-2;i<=+2;i++) $.mypageInsertItem(i,,page_now,page_box,); $.mypageInsertOther(page_box); } page_next.appendTo(page_box); }) }, $.mypageInsertItem=function(i,now,page_now,page_box,fn){ if(i!=now) $("<li><a href=\"javascript:void(0)\">"+i+"</a></li>").on("click",function(){if(typeof fn === "function")fn($(this).text());}).appendTo(page_box); else page_now.appendTo(page_box); }, $.mypageInsertOther=function(page_box){ $("<li><a href=\"javascript:void(0)\">…</a></li>").addClass("disabled").appendTo(page_box); }, $.mypage=function(id,now,max,fn){$("#"+id).mypage({now:now,max:max,callback:fn})}, $.mypagesm=function(id,now,max,fn){$("#"+id).mypage({now:now,max:max,callback:fn,style:"pagination-sm"})}, $.mypagelg=function(id,now,max,fn){$("#"+id).mypage({now:now,max:max,callback:fn,style:"pagination-lg"})} })(jQuery);
The above is all about this article. I hope it will be helpful to everyone to learn jQuery.