Home > Developer > JavaScript

Page number format supported by the javascript paging class

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Because of the project requirements, the front-end time should display all the affiliated images of a product by page without considering Ajax requests. Therefore, we simply put all the images out at one time, then paging is performed during loading. Many jquery and property functions are implemented on the Internet, but many of their plug-in's ancillary functions are not required, and there is no need to reference this library for such a functional area, for the sake of speed, of course, your server is good, but in fact this effect is not necessary, but it is often used, so it is packaged into a class for future use, it can also be used by people who need it.

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.

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br/> <HTML xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead> <br/> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "/> <br/> <style type =" text/CSS "> <br/> body {<br/> text-align: center; <br/> padding: 20px 0 0 0; <br/> font-size: 12px; <br/>}< br/> A {<br/> color: #000; <B R/> font-size: 12px; <br/> cursor: pointer; <br/>}< br/> ul, Li {<br/> margin: 0; <br/> padding: 0; <br/> list-style: none; <br/>}< br/>. contain {<br/> margin: 0 auto; <br/> width: 825px; <br/> text-align: Left; <br/> border: 1px #000 solid; <br/> padding: 5px; <br/> Height: auto; <br/>}< br/> Li. sd a, Li. sd a: Link, Li. sd a: visited {background-color: #000; color: # FFF; font-size: 13px ;} <br/> </style> <br/> <title> jpage demo -By funnyzak </title> <br/> <SCRIPT type = "text/JavaScript"> <br/>/* sort tool by funny Zak <silenceacegmail.com> 2009-8-23 <br/> "Call method var ZP = new zakpage (parameter ); ZP. init (); <br/> the parameter uses this as the source content container, the paging result container, the navigation container, the page size, and the one-pick content callback function to return the Li object, with each Li style, if the selected style does not exist, it is null or "" <br/>. The default start page number. format the page number display format */<br/> function zakpage (ID, pagec, Navid, pagesize, lievt, DS, SS, idx, navp) {<br/> This. OBJ = This; <br/> This. pageid = ID; <br/> This. pagec = pagec; <Br/> This. navc = navid; <br/> This. pagesize = pagesize | 7; <br/> This. lievt = lievt | NULL; <br/> This. rcount = 0; <br/> This. pagecount = 0; <br/> This. cpage = 1; <br/> This. DS = Ds; <br/> If (this. DS = NULL) {This. DS = "" ;}< br/> This. ss = SS; <br/> If (this. ss = NULL) {This. ss = "" ;}< br/> This. idx = idx; <br/> This. navpre = navp | ["Total {$ pcount} pages/{$ rcount}, current page {cpage}", "Homepage", "Previous Page", "Next page ", "Last page"]; <br/>}< br /> Zakpage. prototype = {<br/> init: function () {<br/> document. getelementbyid (this. pageid ). style. display = "NONE"; <br/> This. rcount = document. getelementbyid (this. pageid ). getelementsbytagname ("Li "). length; <br/> var residue = This. rcount % This. pagesize; <br/> var Nums = parseint (this. rcount/This. pagesize); <br/> This. pagecount = Nums; <br/> If (residue! = 0) {This. pagecount = Nums + 1 ;}< br/> This. gopage (this. idx); <br/>}, <br/> Guide: function () {<br/> var nav = document. getelementbyid (this. navc); <br/> var Np = This. navpre; <br/> nav. innerhtml = NP [0]. replace ("{$ rcount}", this. rcount ). replace ("{$ pcount}", this. pagecount ). replace ("{cpage}", this. cpage); <br/> nav. appendchild (this. createa (NP [1], 1); <br/> nav. appendchild (this. createa (NP [2], this. cpage-1); <br/> Nav. appendchild (this. createa (NP [3], this. cpage + 1); <br/> nav. appendchild (this. createa (NP [4], this. pagecount); <br/>}, <br/> createa: function (HTML, index) {<br/> var AA = document. createelement ("A"); <br/> AA. innerhtml = HTML; <br/> var o = This. OBJ; <br/> AA. onclick = function () {o. gopage (INDEX) ;}< br/> return AA; <br/>}, <br/> gopage: function (INDEX) {<br/> If (index> This. pagecount) {Index = 1 ;}< br/> If (index <= 0) {Index = This. pagecount ;}< br/> This. cpage = index; <br/> var ghtml = document. getelementbyid (this. pagec); <br/> ghtml. innerhtml = ""; <br/> var pages = (index-1) * This. pagesize; <br/> var pagee = pages + this. pagesize; <br/> If (pagee> This. rcount) {pagee = This. rcount ;}< br/> for (VAR I = pages; I <pagee; I ++) {<br/> var lil = document. createelement ("Li"); <br/> Lil. classname = This. DS; <br/> Lil. innerhtml = This. li TEM (I); <br/> var SSS = This. SS; <br/> If (this. lievt! = NULL) {<br/> Lil. lievt = This. lievt; <br/> Lil. onclick = function () {<br/> This. lievt (this); <br/> This. classname = SSS; <br/>}< br/> ghtml. appendchild (LIL); <br/>}< br/> This. guide (); <br/>}, <br/> litem: function (INDEX) {<br/> return document. getelementbyid (this. pageid ). getelementsbytagname ("Li") [Index]. innerhtml; <br/>}< br/> </SCRIPT> <br/> </pead> <br/> <body> <br/> <Div class = "contain"> <br /> <Ul id = "jpage"> <br/> <li> <a href = "http://mo.zzit.com.cn/labs/20091128/232363.shtml" target = "_ blank" Mon = "Ct = 0 & A = 27 & C = technnews "> slide the full keyboard LG first Google gw620 evaluation </a> </LI> <br/> <li> <a href =" http://mo.zzit.com.cn/market/20091128/232573.shtml "target =" _ blank "Mon =" Ct = 0 & A = 27 & C = technnews "> Samsung 3G Music new m519 only 1280 </a> </LI> <br/> <li> <a href = "http://article.pchome.net/content-1014181.html" target = "_ blank" Mon = "C T = 0 & A = 27 & C = technnews "> Nokia n86 all-around performance: 8 million pixels for 2k6 only </a> </LI> <br/> <li> <a href = "http://mo.zzit.com.cn/new/20091128/232605.shtml" target = "_ blank" Mon = "Ct = 0 & A = 27 & C = technnews"> wm6.5 system HP ipaq glisten mobile phone release </a> </Li> <br/> <li> <a href = "http://mo.zzit.com.cn/buy/20091128/232622.shtml" target = "_ blank" Mon = "Ct = 0 & A = 27 & C = technnews"> enjoy perfect vision feast classic HD screen mobile phone recommendations </a> </LI> <br/> <li> <a href = "http://internal.dbw.cn/system/2009/11/ 27/052239606. shtml "target =" _ blank "Mon =" Ct = 0 & A = 27 & Col = 7 "> six patients with A-stream died in one week in Hunan </a> </LI> <br/> <li> <a href = "http://news.sina.com.cn/c/2009-11-28/125416684006s.shtml" target = "_ blank" Mon = "Ct = 0 & A = 27 & Col = 7"> Sanlu's bankruptcy debt settlement rate is zero no refund for children with stones </a> </LI> <br/> <li> <a href = "http://news.xinmin.cn/rollnews/2009/11/27/2990106.html" target = "_ blank" Mon = "Ct = 0 & A = 27 & Col = 7 "> Hai Qiming, starring in" dwelling: unfair criticism of seaweed </a> </LI> <br/> <li> <a href = "http:/news .Xinmin.cn/rollnews/2009/11/28/2992331.html "target =" _ blank "Mon =" Ct = 0 & A = 27 & Col = 7 "> Lin Zhiling's desert experience is called by Jay Chou) </a> </LI> <br/> <li> <a href = "http://news.cctv.com/law/20091128/100454.shtml" target = "_ blank" Mon = "Ct = 0 & A = 27 & col = 7 "> Nanjing 5 dead 4 injury drunk driving case public trial Zhang mingbao cry sorry </a> </LI> <br/> <li> <a href =" http:// TV .sohu.com/20091128/n268540542.shtml "Target =" _ blank "Mon =" Ct = 0 & A = 27 & Col = 7 "> video: identify the failure of the grid caused by snow in Shenyang tiger biting incident </a> </LI> <br/> <li> <A href = "http://sports.sohu.com/20091128/n268535705.shtml" target = "_ blank" Mon = "Ct = 0 & A = 27 & Col = 7"> lucky color customers do not forget to buy colorful cherry ""$4000 </a> </LI> <br/> <li> <a href =" http://finance.sina.com.cn/money/forex/20091128/04277029051.shtml "target =" _ blank "> Dubai debt crisis pushed the dollar to soar suddenly </A> <SPAN class = "time"> </span> </LI> <br/> <li> <a href = "http://finance.sina.com.cn/money/fund/20091128/04057028862.shtml" target = "_ blank"> bull market vision vs increased volatility Capital investment in prisoner's dilemma </a> <SPAN class = "time"> </span> </LI> <br/> <li> <a href = "http://finance.sina.com.cn/money/fund/20091128/04057028859.shtml "Target =" _ blank "> low-risk products are highlights of the release of new funds in mid-to-late November </a> <SPAN class =" time "> </span> </LI> <br/> <! --> <Br/> <li> <a href = "http://finance.sina.com.cn/consume/20091129/11257030393.shtml" target = "_ blank"> Cathay Pacific Airways forced early landing when all 10 toilets are damaged </a> <SPAN class = "time"> </span> </LI> <br/> <li> <a href = "http://finance.sina.com.cn/consume/20091128/10237029443.shtml" target = "_ blank"> Guangzhou quality exhibition opened buyers strive for 80 million yuan of giant diamond </a> <SPAN class = "time"> </span> </LI> <br/> <li> <a href =" http://finance.sina.com.cn/stock/cngem/gemipo/2009112 9/20347030740. shtml "target =" _ blank "> no major issues not disclosed since the resumption of the cards on Dayu water saving 30 days </a> <SPAN class =" time "> </span> </Li> <br/> <li> <a href = "http://finance.sina.com.cn/stock/cngem/gemipo/20091129/16417030615.shtml" target = "_ blank"> Shenzhen tianyue, the first high-price gem stock, was suspended for verification on November 30 </a> <SPAN class = "Time "> </span> </LI> <br/> <li> <a href =" http://finance.sina.com.cn/stock/y/20091129/16177030594.shtml "target =" _ blank "> weekend market impact important information Review and Outlook </a> <span linoleic Ss = "time"> </span> </LI> <br/> <li> <a href = "http://finance.sina.com.cn/stock/s/20091129/15467030568.shtml" target = "_ blank"> startup: buffett favored Chinese tailor </a> <SPAN class = "time"> </span> </LI> <br/> <li> <a href =" http://finance.sina.com.cn/stock/s/20091129/10197030320.shtml "target =" _ blank "> the rise of Lotus MSG becomes difficult to solve the problem of high-level access by a hot-Selling Organization </a> <SPAN class =" time "> </span> </Li> <br/> <li> <a href = "http://finance.sina.com.cn/stock /Data/20091128/16487029826 .shtml "target =" _ blank "> next week, the market value of A-share restricted shares will be lifted by more than. </a> <SPAN class =" time "> </span> </LI> <br/> <li> <a href = "http://finance.sina.com.cn/stock/hkstock/hkstocknews/20091127/21417027999.shtml" target = "_ blank"> Zeng Junhua: dubai's debt crisis has little impact on Hong Kong's banking industry </a> <SPAN class = "time"> </span> </LI> <li> <a href = "http://mo.zzit.com.cn/labs/20091128/232363.shtml" Target = "_ blank" Mon = "Ct = 0 & A = 27 & C = technnews"> slide the full key Disk LG first Google mobile gw620 evaluation </a> </LI> <br/> <li> <a href = "http://mo.zzit.com.cn/market/20091128/232573.shtml" target = "_ blank" Mon = "Ct = "0 & A = 27 & C = technnews "> Samsung 3G Music new m519 is only 1280 </a> </LI> <br/> <li> <a href =" http://article.pchome.net/content-1014181.html "target =" _ blank "Mon =" Ct = 0 & A = 27 & C = technnews "> Nokia n86 all-around performance 8 million pixels for 2k6 only </a> </Li> <br/> <li> <a href = "http://mo.zzit.com.cn/new/20091128/232605.shtml" target = "_ blank" MON = "Ct = 0 & A = 27 & C = technnews"> wm6.5 system HP ipaq glisten mobile phone release </a> </LI> <br/> <li> <pref = "http://mo.zzit.com.cn/buy/20091128/232622.shtml" target = "_ blank" Mon = "Ct = 0 & A = 27 & C = technnews"> enjoy the perfect visual feast classic HD screen mobile phone recommendations </a> </LI> <br/> <li> <a href = "http://internal.dbw.cn/system/2009/11/27/052239606.shtml" target = "_ blank" Mon = "Ct = 0 & A = 27 & Col = 7"> six patients died in a week in Hunan Province </a> </LI> <br/> <li> <a href = "http://news.sina.com.cn/c/2009-11-28/1 25416684006s.shtml "target =" _ blank "Mon =" Ct = 0 & A = 27 & Col = 7 "> zero trigger debt settlement rate is not enough for children with stones </a>/ LI> <br/> <li> <a href = "http://news.xinmin.cn/rollnews/2009/11/27/2990106.html" target = "_ blank" Mon = "Ct = 0 & A = 27 & Col = 7"> starring Hai Qiming: pure criticism of seaweed unfair </a> </LI> <br/> <li> <a href = "http://news.xinmin.cn/rollnews/2009/11/28/2992331.html" target = "_ blank" Mon = "Ct = 0 & A = 27 & Col = 7 "> Lin Zhiling's desert experience is called Jay Chou's joke (figure) </a> </LI> <br/> <li> <a href = "HT TP: // news.cctv.com/law/20091128/100454.shtml "target =" _ blank "Mon =" Ct = 0 & A = 27 & Col = 7 "> Zhang mingbao shouted in tears when Zhang mingbao was in the public trial of the 5 dead and 4 injured cases in Nanjing sorry </a> </LI> <br/> <li> <a href = "http:// TV .sohu.com/20091128/n268540542.shtml" target = "_ blank" Mon = "Ct = 0 & A = 27 & col = 7 "> video: identify the failure of the grid caused by snow in Shenyang tiger biting incident </a> </LI> <br/> <li> <a href = "http://sports.sohu.com/20091128/n268535705.shtml" target = "_ blank" Mon = "Ct = 0 & A = 27 & Col = 7"> lucky customers do not forget to buy lucky ones. "red cherries" RMB 4000 </a> </LI> <br/> <Li> <a href = "http://finance.sina.com.cn/money/forex/20091128/04277029051.shtml" target = "_ blank"> the Dubai debt crisis pushed the dollar to soar suddenly </a> <SPAN class = "time"> </span> </LI> <br/> <li> <a href = "http://finance.sina.com.cn/money/fund/20091128/04057028862.shtml" target = "_ blank"> bull market vision vs increased volatility means that the capital investment is in prisoner's dilemma </> <SPAN class = "time"> </span> </LI> <br/> <li> <a href = "http://finance.sina.com.cn/money/fund/20091128/04057028859.shtml "Target =" _ blank "> low-risk products are highlights of the release of new funds in mid-to-late November </a> <SPAN class =" time "> </span> </LI> <br/> <! --> <Br/> <li> <a href = "http://finance.sina.com.cn/consume/20091129/11257030393.shtml" target = "_ blank"> Cathay Pacific Airways forced early landing when all 10 toilets are damaged </a> <SPAN class = "time"> </span> </LI> <br/> <li> <a href = "http://finance.sina.com.cn/consume/20091128/10237029443.shtml" target = "_ blank"> Guangzhou quality exhibition opened buyers strive for 80 million yuan of giant diamond </a> <SPAN class = "time"> </span> </LI> <br/> <li> <a href =" http://finance.sina.com.cn/stock/cngem/gemipo/20091129/20347030740.shtml "target =" _ blank "> Dayu water saving 30 days from the resumption of the Board does not disclose major issues </a> <SPAN class =" time "> 20:34 </span> </Li> <br/> <li> <a href = "http://finance.sina.com.cn/stock/cngem/gemipo/20091129/16417030615.shtml" target = "_ blank"> Shenzhen tianyue, the first high-price gem stock, was suspended for verification on November 30 </a> <SPAN class = "Time "> </span> </LI> <br/> <li> <a href =" http://finance.sina.com.cn/stock/y/20091129/16177030594.shtml "target =" _ blank "> weekend market impact important information Review and Outlook </a> <SPAN class = "time"> 16: 17 </span> </LI> <br/> <li> <a href = "http://finance.sina.com.cn/stock/s/20091129/15467030568.shtml" target = "_ blank "> Yang chuangshi: buffett favored Chinese tailor </a> <SPAN class = "time"> </span> </LI> <br/> <li> <a href =" http://finance.sina.com.cn/stock/s/20091129/10197030320.shtml "target =" _ blank "> the rise of Lotus MSG becomes difficult to solve the problem of high-level access by a hot-Selling Organization </a> <SPAN class =" time "> </span> </Li> <br/> <li> <a href = "http://finance.sina.com.cn/stock/data/20091128/16487029826.shtml" target = "_ blank"> next week, the market value of A-share restricted offerings fell by more than four times </a> <SPAN class = "Time"> </span> </LI> <br/> <li> <a href = "http://finance.sina.com.cn/stock/hkstock/hkstocknews/20091127/21417027999.shtml" target = "_ blank"> Zeng Junhua: the Dubai debt crisis has little impact on the banking industry in Hong Kong </a> <SPAN class = "time"> </span> </LI> <br/> </ul> <br/> <ul id = "pagec"> <br/> </ul> <br/> </div> <br/> <Div id = "navs"> </Div> <br/> <SCRIPT type = "text/JavaScript"> <br/> function BB () {alert (. innerhtml) ;}< br/> var arr = ["{$ rcount} record, total {$ pcount} page currenpage {cpage}", "indexpage", "prevpage ", "nextpage", "lastpage"]; <br/> var ZP = new zakpage ("jpage", "pagec", "navs", 15, BB, null, null, 4, null); // This is the default page number format <br/> // var ZP = new zakpage ("jpage", "pagec", "navs", 15, BB, null, null, 4, arr); // custom page number format <br/> ZP. init (); <br/> </SCRIPT> <br/> </body> <br/> </ptml> <br/>

Run code

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
javascript format number thousand separator document get element by class name javascript get element by class name javascript javascript get child element by class supported by or with compressed swf format not supported class by class

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More