Simple paging code js implementation, paging code js
Let's take a look:
Simple paging js Code:
1. Effect description:
JQuery plug-in that can be displayed without pagination
JQuery paging plug-in -- jQuery. page. js is easy to use and has a great effect.
2. Call method:
$ (". TcdPageCode "). createPage ({pageCount: 10, current: 1, backFn: function (p) {// click the callback method, p is the current page number}); pageCount: total page number current: current page
3. js encapsulation code
// Paging plug-in/** ch **/(function ($) {var ms = {init: function (obj, args) {return (function () {ms. fillHtml (obj, args); ms. bindEvent (obj, args) ;}) () ;}, // fill in html fillHtml: function (obj, args) {return (function () {obj. empty (); // previous page if (args. current> 1) {obj. append ('<a href = "javascript:;" class = "prevPage"> previous page </a>');} else {obj. remove ('. prevPage '); obj. append ('<span class = "disabled"> previous page </span>');} // intermediate page number if (ar Gs. current! = 1 & args. current> = 4 & args. pageCount! = 4) {obj. append ('<a href = "javascript:;" class = "tcdNumber">' + 1 + '</a>');} if (args. current-2> 2 & args. current <= args. pageCount & args. pageCount> 5) {obj. append ('<span>... </span> ');} var start = args. current-2, end = args. current + 2; if (start> 1 & args. current <4) | args. current = 1) {end ++;} if (args. current> args. pageCount-4 & args. current> = args. pageCount) {start --;} for (; start <= e Nd; start ++) {if (start <= args. pageCount & start> = 1) {if (start! = Args. current) {obj. append ('<a href = "javascript:;" class = "tcdNumber">' + start + '</a>');} else {obj. append ('<span class = "current">' + start + '</span>') ;}} if (args. current + 2 <args. pageCount-1 & args. current> = 1 & args. pageCount> 5) {obj. append ('<span>... </span> ');} if (args. current! = Args. pageCount & args. current <args. pageCount-2 & args. pageCount! = 4) {obj. append ('<a href = "javascript:;" class = "tcdNumber">' + args. pageCount + '</a>');} // next page if (args. current <args. pageCount) {obj. append ('<a href = "javascript:;" class = "nextPage"> next page </a>');} else {obj. remove ('. nextPage '); obj. append ('<span class = "disabled"> next page </span>') ;}) () ;}, // bindEvent: function (obj, args) {return (function () {obj. on ("click", ". tcdNumber ", function () {var current = parseInt ($ (this ). text (); ms. fillHtml (obj, {"current": current, "pageCount": args. pageCount}); if (typeof (args. backFn) = "function") {args. backFn (current) ;}}); // Previous Page obj. on ("click", ". prevPage ", function () {var current = parseInt (obj. children ("span. current "). text (); ms. fillHtml (obj, {"current": current-1, "pageCount": args. pageCount}); if (typeof (args. backFn) = "function") {args. backFn (current-1) ;}}); // next page obj. on ("click", ". nextPage ", function () {var current = parseInt (obj. children ("span. current "). text (); ms. fillHtml (obj, {"current": current + 1, "pageCount": args. pageCount}); if (typeof (args. backFn) = "function") {args. backFn (current + 1) ;}}) ;}() ;}}$. fn. createPage = function (options) {var args = $. extend ({pageCount: 10, current: 1, backFn: function () {}}, options); ms. init (this, args) ;}} (jQuery );
4. demo:
<! DOCTYPE html>
The above is all the content in this article, and I hope it will help you learn Javascript.