JQuery paging plug-in

Less than 10 pages

If the number is greater than 10, an ellipsis is displayed. In principle, there are five pages in the middle, one page on the left, and one page on the right. If only one page is omitted, no ellipsis is displayed.

The total number of pages will not be displayed if there are more than 100 pages, because I don't think it is necessary, hahaha

/*! * ------------------------------------------------------------- * The paging plug-in generates page numbers and processes click events ** --------------------------------------------------------------- * required JS: jquery.1.4.js * ------------------------------------------------------------- * $ (xxx ). paging (index, count, callback) * index (int): Current page x count (int): total page x callback (function): callback function. The callback parameter is index, count *--------------------------------- ---------------------------- * $ (Xxx ). paging (index, count, form) * form (String): form name, automatically search for the name = page element in the form, set the value, and submit the form *-------------------------------------------------------------*. auto-paging automatic paging * data-index specifies the current page number, data-count specifies the total page number, and data-form specifies the form name * automatically calls the second method: $ (". auto-paging "). paging (index, count, form); ** ----------------------------------------------------------------- * author: Zhao Xiaohua * d Ate: 2014-01-08 * functions */(function ($) {var findForm = function (name) {var form = undefined; if (name instanceof jQuery | name. constructor = jQuery) {form = name;} else if (typeof (name) = "string ") {form = $ ("form [name =" + name + "]");} return form & form. length> 0? Form: undefined;}; var go = function (event) {// the pagination function var self = $ (this), wrap = self. closest ("p"); // paging panel // the page to which the page is scrolled. data-index is taken for the next page on the previous page, and text () var index = self for the page number. attr ("value") | self. text (), count = event. data. count, // the total number of pages callback = event. data. callback; // callback function if (callback) {var form; if ($. isFunction (callback) {// callback function // regenerate the page number, because the data wrap may be updated through AJAX. parent (). paging (index, count, callback); callback. call (wrap. find (". on "). get (0), index, count);} else if (form = findForm (callback) {// form name // No page number needs to be generated, because submitting a form will refresh the entire page var input = form. find ("input [name = page]"); // query the page field if (input. length = 0) {// create input = $ (""). AppendTo (form);} input. val (index); // set the value of the page field form. submit (); // submit form} else {// The callback method is not specified and the page number is regenerated to demonstrate the wrap of page number changes. parent (). paging (index, count, callback);} return false;}; var create = function (index, count, callback) {// L = left, R = right, M = display several pages in the middle, // T = transition page number. If the count value exceeds this value, the page number on the right is not displayed. Only the transition page number is displayed. // For example, L = 1, R = 1, M = 3, T = 100 (transition page = 100) // count = 80, index = 10, the result is [1]... [9] [10] [11]... [80] // count = 200, index = 10, the result is [1]... [9] [10] [11]... [100]... // count = 200, index = 150, the result is [1]... [100]... [149] [150] [151]... var L = 1, R = 1, M = 5, T = 100, cnt = parseInt (count), idx = parseInt (index ), // convert to the number param = {count: cnt, callback: callback}; var wrap = $ (this ). addClass ("paging "). children ("p: first "). empty (); if (wrap. length = 0) {wrap = $ ("
"). AppendTo (this);} var add = function (p) {if (p = undefined) {wrap. append ($ (""). Append ("... ");} else if (p = idx) {wrap. append ($ (""). addClass ("on "). append (p);} else {var a = $ (""). attr ("href", "# page =" + p ). bind ("click", param, go); wrap. append (. append (p);} wrap. append ("") ;}; if (cnt <= M + L + R + 2) {// the total number of pages is very small. The ellipsis for (var I = 1; I <= cnt; I ++) {add (I) ;}} else {var h = Math. floor (M/2), bgn = Math. min (Math. max (idx-h, L + 2), cnt-M-R), end = Math. min (Math. max (idx + h, M + L + 1), cnt-R-1); for (var I = 1; I <= L; I ++) {// add (I);} if (bgn <= L + 2) {// add (L + 1) next to the page number on the left );} else {add (); // ellipsis} if (bgn> T + 2) {add (T); add () ;}// transition page number for (var I = bgn; I <= end; I ++) {add (I); // intermediate page number} if (end> = cnt-R-1) {// add (cnt-R) next to the page number on the right;} else {add (); // ellipsis} // the total number of pages is not large or will reach the total number of pages, show if (cnt <= T | end> = cnt-R-1) {for (var I = cnt-R + 1; I <= cnt; I ++) {add (I); // right page number} else if (end <T-2) {add (T); add (); // transition page number} var prev = $ (""). append ("<"); // the current page number is 1, and the click event if (idx> 1) is not bound {// when the current page number is greater than 1, The Click Event prev is bound. attr ("href", "# page = prev "). attr ("value", idx-1 ). bind ("click", param, go);} wrap. prepend (""). prepend (prev); var next = $ (""). append (">"); // the current page number is the last page. if (idx <cnt) {// when the current page number is smaller than the last page, bind the click event next. attr ("href", "# page = next "). attr ("value", idx + 1 ). bind ("click", param, go);} wrap. append (next) ;};$. fn. paging = function (index, count, callback) {// return this by page. each (function (I) {create. call (this, index, count, callback); return true ;};}) (jQuery); $ (function () {// automatic paging, class = "auto-paging", // data-index specifies the current page number, data-count specifies the total page number, and data-form specifies the form name $ (". auto-paging "). each (function () {var self = $ (this), index = self. attr ("data-index") | 1, count = self. attr ("data-count"), form = self. attr ("data-form"); count & self. paging (index, count, form );});});

/** Paging style **/html. paging {height: 22px;} html. paging a {background-color: # FFFFFF; border: 1px solid # Bebebebe; text-decoration: none; color: #404040;} html. paging a: hover, html. paging. on {background-color: # 4DAD5D; border: 1px solid # 4DAD5D; text-decoration: none; color: # FFFFFF;} html. paging a, html. paging I {float: left; display: inline; height: 20px; line-height: 20px; margin: 0 4px; padding: 0 5px;} html. paging I {font-style: normal; padding: 0 4px ;}