Paging plug-in code:
1(function ($) {2$.fn.pager =function(options) {3 varopts =$.extend ({}, $.fn.pager.defaults, options);4 return This. each (function () {5$( This). Empty (). Append (Renderpager (parseint (Options.pagenumber), parseint (Options.pagecount), Options.buttonclickcallback));6$ ('. Pages li '). MouseOver (function() {document.body.style.cursor = "pointer";}). Mouseoutfunction() {document.body.style.cursor = "Auto"; });7 });8 };9 Ten functionRenderpager (pagenumber, PageCount, buttonclickcallback) { One var$pager = $ (' <ul class= ' pages ></ul> '); A$pager. Append (Renderbutton (' home ', pagenumber, PageCount, Buttonclickcallback)). Append ("prev", PageNumber, PageCount, Buttonclickcallback)); - varStartPoint = 1; - //var endPoint = PageCount < 9? pagecount:9; the varEndPoint = PageCount < 7? Pagecount:7; - //var thpoint = "<li class= ' thpoint ' >...</li>"; - varThpoint = ""; - if(PageNumber > 4) { +StartPoint = pagenumber-3; -EndPoint = pagenumber + 3; + } A if(EndPoint >PageCount) { atStartPoint = pagecount-6; -EndPoint =PageCount; -Thpoint = ""; - } - if(StartPoint < 1) { -StartPoint = 1; in } - for(varpage = StartPoint; Page <= EndPoint; page++) { to varCurrentbutton = $ (' <li class= ' page-number ' > ' + (page) + ' </li> '); +page = = pagenumber? Currentbutton.addclass (' pgcurrent '): Currentbutton.click (function () { -Buttonclickcallback ( This. Firstchild.data); the }); * currentbutton.appendto ($pager); $ }Panax Notoginseng$pager. Append (Thpoint). Append (Renderbutton (' next page ', PageNumber, PageCount, Buttonclickcallback)). Append ( Renderbutton (' Last ', PageNumber, PageCount, Buttonclickcallback)); -$pager. Append ("<li class= ' thpoint ' > Total:" + pagecount + "page </li>"); the //var Strgoto = $ ("<li class= ' thpoint ' > Current <input type= ' text ' value= '" + pagenumber + "' maxlength= ' 6 ' id= ' Gotova L ' style= ' width:20px; height:16px;margin-top:-3px;padding-top:2px;padding-left:10px; ' /> page </li> "); + varStrgoto = ""; A $pager. Append (Strgoto); the //$pager. Append (Changepage (' Go ', PageCount, Buttonclickcallback)); + return$pager; - } $ functionchangepage (Buttonlabel, PageCount, buttonclickcallback) { $ var$btngoto = $ (' <li class= "Pgnext" > ' + buttonlabel + ' </li> '); -$btngoto. Click (function () { - varGotoval = $ (' #gotoval '). Val (); the varPATRN =/^[1-9]{1,20}$/; - if(!patrn.exec (Gotoval)) {WuyiAlert ("Please enter a non-zero positive integer!") "); the return false; - } Wu varIntval =parseint (gotoval); - if(Intval >PageCount) { AboutAlert ("The page you entered exceeds the total number of pages" +PageCount); $ return; - } - Buttonclickcallback (intval); - }); A return$btngoto; + } the - functionRenderbutton (Buttonlabel, PageNumber, PageCount, buttonclickcallback) { $ var$Button = $ (' <li class= "Pgnext" > ' + buttonlabel + ' </li> '); the varDestpage = 1; the Switch(buttonlabel) { the CaseHome: theDestpage = 1; - Break; in Case"Prev": theDestpage = Pagenumber-1; the Break; About Case"Next Page": theDestpage = pagenumber + 1; the Break; the CaseLast: +Destpage =PageCount; - Break; the }Bayi if(buttonlabel = = "Home" | | buttonlabel = = "Previous Page") { thePageNumber <= 1? $Button. addclass (' Pgempty '): $Button. Click (function() {buttonclickcallback (destpage);}); the } - Else { -PageNumber >= PageCount? $Button. addclass (' Pgempty '): $Button. Click (function() {buttonclickcallback (destpage);}); the } the return$Button; the } the -$.fn.pager.defaults = { thePagenumber:1, thePagecount:1 the };94}) (JQuery);
View Code
Page Invoke JS
1 varInvert = {2Pagerfunction(pageIndex) {3 4$ ("#pager"). Pager ({5 Pagenumber:pageindex,6 Pagecount:data.pageNum,7 Totalcount:data.totalCount,8 ButtonClickCallback:invert.pageClick9 });Ten One A - } - the }, -Pageclick:function(Pageclickednumber) {//Paging Callback - varStatus =invert.getstatus (); - Invert.pager (pageclickednumber,status); + } -};
View Code
<div id= "Pager" class= "W-page" >
</div>
Pagination Style
1 /*jquery.page.js CSS*/2 . W-page{margin:40px Auto 30px;}3 ul.pages{Display:Block;Border:None;Text-transform:Uppercase;font-size:12px;Display:Inline-block;padding:0;Overflow:Hidden;font-size:14px;}4 ul.pages Li{List-style:None;float: Left;text-decoration:None;margin:0 15px 0 0;padding:6px 10px;Color:#b6b6b6;Background-color:#c6c6c6;Color:#fff;}5 ul.pages Li:hover{Background-color:#ff4747;}6 ul.pages Li.pgempty,li.pgnext{Color:#fff;Background-color:#c6c6c6;padding:6px 10px;}7 ul.pages li.pgcurrent{Color:#fff;Font-weight: the;background:#ff4747;}8 Div#pager{text-align:Center;}9 #pager. Count:hover, #pager. Thpoint:hover{Background-color:#c6c6c6;}Ten #pager. Thpoint,ul.pages li.pgempty{cursor:default;}
View Code
JS Paging control