Encapsulated JavaScript Paging Plug-in-beta version (beta) available

Source: Internet
Author: User

The previous beta version of the code we found a lot of problems, in this version we will Solve. Previous version of the connection address: packaged JavaScript page Plug-in-beta

The main thing is to modify the core Approach:

functioninittag () {pagemodel. $element. html ("")    varPagetagdynamic = ""; if(pagemodel.pagecounttag >=Pagemodel.pagecount) {pagemodel.pagecounttag=pagemodel.pagecount}varStart = 3; varEnd = Pagemodel.pagecounttag-2; if(pagemodel.pageindex! = 1) {start= Pagemodel.pageindex-2 >= 4? Pagemodel.pageindex-2:3End= Pagemodel.pageindex + 3 <= pagemodel.pagecount-2? Pagemodel.pageindex + 3:pagemodel.pagecount-2if(end < Pagemodel.pagecounttag-2) {end= Pagemodel.pagecounttag-2; }        if(start > Pagemodel.pagecount-7) {start= Pagemodel.pagecount-7; }    }     for(vari = start; I <= end; i++) {pagetagdynamic+ = StringFormat (pagemodel.pagetagtemplate, "page", i, i, i);    } pagemodel. $element. Append (pagetagdynamic); //add non-clickable spacers on both sidesAddfirstorlast (start! = 3, end! = pagemodel.pagecount-2)    //Add labels to the previous and next pagesAddpreviousornext (); //set the current page label stylesigncurrentpage ();}
the core method of paging

In the core approach I changed the way of thinking: the body of the loop is not all paging labels, because when positioned on the middle page, there may be two non-clickable separator tags. In addition to the homepage and CE tags. All we have to do is to exclude 4 tags in the loop body, the first page, the second page, the last page, the last second Page.

So the starting and ending indexes of loops are start and end

If (pagemodel.pagecounttag >= Pagemodel.pagecount) {

When the total number of pages is guaranteed to be low, the total number of pages
Pagemodel.pagecounttag = Pagemodel.pagecount
}
var start = 3;
var end = pagemodel.pagecounttag-2;

When the current page is not positioned on the homepage

If (pagemodel.pageindex! = 1) {

Determine the starting and ending indexes of a loop
Start = Pagemodel.pageindex-2 >= 4? Pagemodel.pageindex-2:3
End = Pagemodel.pageindex + 3 <= pagemodel.pagecount-2? Pagemodel.pageindex + 3:pagemodel.pagecount-2

Completion of the current page over the hour to the end index
If (end < pagemodel.pagecounttag-2) {
End = pagemodel.pagecounttag-2;
}

The completion of the start index when the current page is too large
If (start > pagemodel.pagecount-7) {
Start = pagemodel.pagecount-7;
}
}

Core code of the loop

for (var i = start; I <= end; i++) {
Pagetagdynamic + = StringFormat (pagemodel.pagetagtemplate, "page", i, i, i);
}

functionaddfirstorlast (existleftdot, Existrightdot) {//This method runs yes, the current page already has a generated tag element    varPrevious =pagemodel. $element. Children (). First (); varNext =pagemodel. $element. Children (). last (); //Add first page label$ (stringFormat (pagemodel.pagetagtemplate, "page", 1, 1, 1) . InsertBefore (previous); //add last page label$ (stringFormat (pagemodel.pagetagtemplate, "page", pagemodel.pagecount, pagemodel.pagecount, pagemodel.pagecount)).    InsertAfter (next); if(existleftdot) {$ (pagemodel.pagedottag). insertbefore (previous)}Else{$ (stringFormat (pagemodel.pagetagtemplate,"page", 2, 2, 2) . InsertBefore (previous); }    if(existrightdot) {$ (pagemodel.pagedottag). insertafter (next)}Else{$ (stringFormat (pagemodel.pagetagtemplate,"page", pagemodel.pagecount-1, pagemodel.pagecount-1, pagemodel.pagecount-1) . InsertAfter (next); }}
add non-clickable spacers on both sides

Addfirstorlast (start! = 3, end! = pagemodel.pagecount-2)

Parameters are two bool types, we have previously mentioned the elimination of 4 tags in the body of the loop, namely the first page, the second page, the last page, and the last second Page.

So here we're going to add the excluded tags back, then, if there is a third page, then add the second page, does not exist, add the non-clickable delimited label, the last is the same

So the paging navigation is basically DONE.

function addpreviousornext () {    var previous = pagemodel. $element. children (). first ();     var next = pagemodel. $element. children (). last ();     if (pagemodel.pageindex! = 1) {        $ (pagemodel.pagelasttag). insertbefore (previous);    }     if (pagemodel.pageindex ! = Pagemodel.pagecounttag) {        $ (pagemodel.pagenexttag). insertafter (next);}    }
previous page and next page
function signcurrentpage () {    $ ("#page-" + pagemodel.pageindex). addclass ("pageselected");}
Add current page style
    <style>label{margin:10px;        }. pageselected a,. Page A{text-decoration:None;        }. Page A{Color:Black;        }. pageselected a{Color:Blueviolet;        }    </style>
style sheet

Encapsulated JavaScript Paging Plug-in-beta version (beta) available

Related Article

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.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

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