Pagination plug-in _ jquery Based on bootstrap3 and jquery

This article mainly introduces the relevant information of the pagination plug-ins Based on bootstrap3 and jquery. If you need it, you can refer to a self-developed pagination plug-in based on bootstrap3 and jquery to learn how to write jquery plug-ins, it is generally written. It's ugly.

/*** Jquery paging plug-in based on bootstrap3 * There are two calling Methods * 1. direct call Method * Common size * $. mypage (id, now, max, fn); * large size * $. mypagelg (id, now, max, fn); * Small Size * $. mypagesm (id, now, max, fn); ** parameter description: id indicates the ID of the container to be placed on the page. now indicates the current page, max indicates the maximum page, and fn indicates the return function, the loose function has a parameter named 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 maximum page, and callback is the return function. The return function has a page number with the parameter clicked, an optional style parameter, including "big" and "small ", fitst Is the text of the home page button, and last is the text of the last page button ** is not displayed when the maximum page is 1. When the current page is set to less than 1, the default value is 1, when the current page is larger than the maximum page, the default is the maximum page * Before referencing this js, please first reference the jquery js file and the css file bootstrap3 **/(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 | is NaN (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 = $ ("
"+ Options. first +"
"). 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 = $ ("
"+ Options. last +"
"); 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 = $ ("
"+ Options. 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. now, page_now, page_box, 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. now, page_now, page_box, options. callback);} else {$. mypageInsertOther (page_box); for (var I = options. now-2; I <= options. now + 2; I ++) $. mypageInsertItem (I, options. now, page_now, page_box, options. callback); $. mypageInsertOther (page_box);} page_next.appendTo (page_box) ;}, $. mypageInsertItem = function (I, now, page_now, page_box, fn) {if (I! = Now) $ ("
"+ I +"
"). 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, 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 the content of this article. I hope it will be helpful for you to learn about jQuery.