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

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