A long time no post ~ ~.
Because the work needs, imitation watercress writing a pagination style.
Self-feeling, such a page before and after the balance, for the user experience is quite good.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > <p tml xmlns= "http://www.w3.org/1999/xhtml" xml:lang= "gb2312" > <pead> <meta http-equiv= "Content-type" cont Ent= "text/html; charset=gb2312 "/> <meta name=" Author "content=" Smiling Dolphin "/> <meta name=" keywords "content=" D Esign, CSS, cascading, style, sheets, XHTML, graphic Design, the Consortium, Web standards, visual, display, Java, JavaScript, C + +, p HP, JSP, ASP, py, pl "/> <meta name=" description "content=" My favorites language. "/> <meta name=" ro Bots "content=" all "/> <title> imitation watercress Paging prototype (JavaScript edition) </title> <style type=" text/css "title=" Curr " Entstyle "media=" screen ">/* paginator * * Paginator {font:14.8px normal Arial, Helvet ICA, Sans-serif; Color: #666666; margin-top:10px; margin-bottom:5px; Line-height:150%; Background-color: #EEFFEE; Text-align:center; }. Paginator A,. Thispage,. break {padding:2px 4px; }. paginator. prev {margin-right:20px; }. Paginator. Next {margin-left:20px; }. Paginator. count {margin-left:20px; font-size:11px; } </style> </pead> <body> <div id= "Pagebar" class= "paginator" ></div> <script LAN guage= "JavaScript" type= "Text/javascript" > Function querystring (item) {var svalue=location.search.match (new RegEx P ("[\?\&]" +item+ = ([^\&]*) (\&?), "I")) return Svalue?svalue[1]:svalue} var count = 560; var perpage = 20; var currentpage = QueryString ("page"); if (currentpage==null) {currentpage = 1; }else{currentpage = parseint (currentpage); var PageCount = Math.floor (count/perpage); var pagestr =""; var breakpage = 9; var currentposition = 4; var breakspace = 2; var maxspace = 4; var prevnum = currentpage-currentposition; var nextnum = currentpage+currentposition; if (prevnum<1) Prevnum = 1; if (nextnum>pagecount) nextnum = PageCount; Pagestr = = (currentpage==1)? ' <span class= "prev" >< front page </span> ': ' <span class= ' prev ' >< front page </span> '; if (Prevnum-breakspace>maxspace) {for (i=1;i<=breakspace;i++) pagestr + = ' +i+ '; Pagestr + = ' <span class= ' break ' >...</span> '; for (i=pagecount-breakpage+1;i<prevnum;i++) pagestr + = ' +i+ '; }else{for (i=1;i<prevnum;i++) pagestr + = ' +i+ '; for (i=prevnum;i<=nextnum;i++) {pagestr = = (currentpage==i)? <span class= "Thispage" > ' +i+ ' </span> ': ' +i+ '; } if (Pagecount-breakspace-nextnum+1>maxspace) {for (i=nextnum+1;i<=breakpage;i++) pagestr + = ' +i+ '; Pagestr = ' <span class= ' break ' >...</sPan> '; for (i=pagecount-breakspace+1;i<=pagecount;i++) pagestr + = ' +i+ '; }else{for (i=nextnum+1;i<=pagecount;i++) pagestr + = ' +i+ '; } Pagestr + = (currentpage==pagecount)? ' <span class= "Next" > Back Page ></span> ': ' <span class= ' next ' > page ></span> '; document.getElementById ("Pagebar"). InnerHTML = Pagestr; </script> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
