Javascript supports pagination of page numbers.

However, they do not need many ancillary functions of the plug-in, and there is no need to reference this library for such a functional area for speed consideration. Of course, you can also use the server, but in fact, this effect is not necessary, but it is often used, so it is packaged into a class for future use, but also for people who need it to learn to use.

The following is a simple demo. You can edit the page number style and use the default format. No nonsense. Let's take a look at it. There are comments and instructions for use... Class (3 kb) can be used with reference to the demo, do not understand the use of can leave a message.

In the future, I will gradually write some problems and solutions frequently encountered in project development, and share them with you.

Jpage. jsCopy codeThe Code is as follows:/* sort tool by Funny ZAk <silenceacegmail.com>
"Call method var zp = new zakPage (parameter); zp. init ();
The parameter uses this as the source content container, the paging result container, the navigation container, the page size, the single-pick content callback function returns the li object, each li style, if the selected style does not exist, it is null or ""
, Default start page number. format the page number display format */
Function zakPage (id, pagec, navid, pagesize, lievt, ds, ss, idx, navp ){
This. obj = this;
This. pageid = id;
This. pagec = pagec;
This. navc = navid;
This. pagesize = pagesize | 7;
This. lievt = lievt | null;
This. rcount = 0;
This. pagecount = 0;
This. cpage = 1;
This. ds = ds;
If (this. ds = null) {this. ds = "";}
This. ss = ss;
If (this. ss = null) {this. ss = "";}
This. idx = idx;
This. navpre = navp | ["Total {$ pcount} pages/{$ rcount}, current page {cpage}", "Homepage", "Previous Page", "Next page ", "Last page"];
}
ZakPage. prototype = {
Init: function (){
Document. getElementById (this. pageid). style. display = "none ";
This. rcount = document. getElementById (this. pageid). getElementsByTagName ("li"). length;
Var residue = this. rcount % this. pagesize;
Var nums = parseInt (this. rcount/this. pagesize );
This. pagecount = nums;
If (residue! = 0) {this. pagecount = nums + 1 ;}
This. gopage (this. idx );
},
Guide: function (){
Var nav = document. getElementById (this. navc );
Var np = this. navpre;
Nav. innerHTML = np [0]. replace ("{$ rcount}", this. rcount ). replace ("{$ pcount}", this. pagecount ). replace ("{cpage}", this. cpage );
Nav. appendChild (this. createa (np [1], 1 ));
Nav. appendChild (this. createa (np [2], this. cpage-1 ));
Nav. appendChild (this. createa (np [3], this. cpage + 1 ));
Nav. appendChild (this. createa (np [4], this. pagecount ));
},
Createa: function (html, index ){
Var aa = document. createElement ("");
Aa. innerHTML = html;
Var o = this. obj;
Aa. onclick = function () {o. gopage (index );}
Return aa;
},
Gopage: function (index ){
If (index> this. pagecount) {index = 1 ;}
If (index <= 0) {index = this. pagecount ;}
This. cpage = index;
Var ghtml = document. getElementById (this. pagec );
Ghtml. innerHTML = "";
Var pages = (index-1) * this. pagesize;
Var pagee = pages + this. pagesize;
If (pagee> this. rcount) {pagee = this. rcount ;}
For (var I = pages; I <pagee; I ++ ){
Var lil = document. createElement ("li ");
Lil. className = this. ds;
Lil. innerHTML = this. litem (I );
Var sss = this. ss;
If (this. lievt! = Null ){
Lil. lievt = this. lievt;
Lil. onclick = function (){
This. lievt (this );
This. className = sss;
}
}
Ghtml. appendChild (lil );
}
This. guide ();
},
Litem: function (index ){
Return document. getElementById (this. pageid). getElementsByTagName ("li") [index]. innerHTML;
}
}

The following is the complete test code. js is included.Xmlns = "http://www.w3.org/1999/xhtml">

• The front underline Of construct in Php construct is
• PHP reads the File Content Code (txt, js, etc)
• PHP uses arrays to reduce program time complexity
• PHP bar chart implementation code
• 5 Image Processing for learning and practicing Ajax + PHP
• PHPMyadmin configuration file (configuration)
• Another php paging implementation code
• Php unlimited Classification Tree Code
• Implementation of Asp.net text box Selection
• Php zip file decompression class code

Li> various pictures and texts of men's and women's scarves

• Photoshop mouse picture of a gloomy girl
• Photoshop a cute cartoon bee
• Photoshop calls out the red-purple color of the beauty texture
• Photoshop classical oil painting effect Processing Method
• Photoshop uses filters and materials to create cool flame words
• Photoshop mouse painted beautiful sleeping princess
• Photoshop's gorgeous golden crown
• Photoshop pink photo
• Photoshop beautiful purple character signature effect
• Photoshop-dark Christmas beauty Whitening
• Create Photoshop blue dreamy trendy wallpapers
• Photoshop color tutorial light gray color
• Photoshop beautiful Christmas balls
• Simple Lighting Effect of Photoshop
• HTML/JS Conversion Tool-IE7 compatible
• Css online compression Tool
• CSS shaping and optimization tools [compression]
• JS Minifier js Compression
• Packer _ Xeon's javascript online encryption tool
• XHTML code nested viewing tool [Tag Closed]
• Script house online conversion can implement various hexadecimal
• Online JS script checker detects js errors
• Online tools for converting html to php, javascript, and asp
• Getting started with regular expressions in 30 minutes
• Basic Regular Expressions
• Javascript online reference manual
• Vbscript Microsoft official reference manual
• JQuery Getting Started Guide
• Asp learning online manual
• Php5 latest Chinese Reference Manual
• Mysql
• SQL database Learning
• Common advertisement code
• Baidu recently indexed Query
• Alexa ranking Query
• IP/Domain Name WHOIS
• Web Editor
• QQ online forced chat tool enhanced Revision
• Thunder express dedicated link encryption and decryption js Code
• Online simplified Chinese character conversion
• Complete html Chinese manual
• Qvod decryption tool Marx