Jquery Ajax paging, modify the plug-in (because the put of the plug-in IE will make an error)

JS Code

(Function ($ ){
$. FN. Extend ({ajaxpager: function (options ){
VaR defaults = {startpage: 1, pagescount: 10, changesiteevent: NULL, showfirstlast: false, showgoback: true}; var Options = $. extend (defaults, options); return this. each (function (){
VaR OBJ = $ (this); If (options. pagescount> 1 ){
OBJ. Empty (). append (calculatepages (parseint (options. startpage), parseint (options. pagescount), options. showgoback, options. showfirstlast ));
If ($. isfunction (options. changesiteevent )){
Options. changesiteevent (options. startpage );
}

 

VaR eventhandler = function (){
$ (". Pagebutton"). Click (function (event ){
Event. preventdefault ();
VaR activepage = $ (this). Find ("A"). ATTR ("page ");
If ($. isfunction (options. changesiteevent )){
OBJ. Empty (). append (calculatepages (parseint (activepage), parseint (options. pagescount), options. showgoback, options. showfirstlast ));
Eventhandler ();
Options. changesiteevent (activepage );
}
});
};

Eventhandler ();
}
Else {
If ($. isfunction (options. changesiteevent )){
Options. changesiteevent (options. startpage );
}
}

});
}
});

Function calculatepages (pageindex, pagecount, showgoback, showfirstlast ){
VaR startpoint = pageindex-2;
VaR endpoint = pageindex + 2;

If (pageindex <5 ){
Startpoint = 1;
If (pagecount> 5 ){
Endpoint = 5;
}
Else {
Endpoint = pagecount;
}
}

If (endpoint> pagecount ){
VaR minus = endpoint-pagecount;
Startpoint = startpoint-minus;
Endpoint = endpoint-minus;
}

VaR $ pager = $ ('<ul class = "pages"> </ul> ');

If (pageindex> 1 ){
If (showfirstlast ){
$ ('<Li class = "pagebutton firstbutton"> <a page = "1"> </a> </LI>'). appendto ($ pager );
}
If (showgoback ){
VaR backbutton = $ ('<li class = "pagebutton backbutton"> <a page = "' + (pageindex-1) + '"> </a> </LI> ');
Backbutton. appendto ($ pager );
}
}

For (VAR page = startpoint; page <= endpoint; Page ++ ){
If (page! = Pageindex ){
VaR currentbutton = $ ('<li class = "pagebutton"> <a page = "' + Page + '">'
+ Page + '</a> </LI> ');
}
Else {
VaR currentbutton = $ ('<li class = "activebutton"> <a page = "' + Page + '">'
+ Page + '</a> </LI> ');
}
Currentbutton. appendto ($ pager );
}

If (pageindex! = Pagecount ){
If (showgoback ){
VaR gobutton = $ ('<li class = "pagebutton gobutton"> <a page = "' + (pageindex + 1) + '">></A> </LI> ');
Gobutton. appendto ($ pager );
}
If (showfirstlast ){
$ ('<Li class = "pagebutton lastbutton"> <a page = "' + pagecount + '" >>></A> </LI> '). appendto ($ pager );
}
}

Return $ pager;
}
}) (Jquery );

2. Style

<Style type = "text/CSS">
. Pages {Height: 35px; Background-color: # FFF; padding-top: 10px ;}
. Pages Li {list-style: none; cursor: pointer; float: Left ;}
. Pagebutton A {text-Decoration: none; width: 24px; Height: 24px; margin-Right: 5px; padding-top: 5px; Height: 19px; Background-color: # FFF; border: solid 1px # dedfde; color: # 3366cc; text-align: center; float: Left; font-weight: bold ;}
. Activebutton A {width: 24px; Height: 24px; margin-Right: 5px; padding-top: 5px; Height: 19px; Background-color: # FFF; text-align: center; float: Left; font-weight: bold; color: # ff4000; Border: none ;}
. Lastbutton A,. firstbutton A {width: 20px ;}
. Gobutton A,. backbutton A {width: 20px ;}
</Style>

3. Call

<H1 id = "result"> <Div id = "pager">
</Div>
</Form>

 

<SCRIPT type = "text/JavaScript">
$ (Document). Ready (function (){
$ ("# Pager"). ajaxpager ({startpage: 7, pagescount: 15, changesiteevent: pageclick, showfirstlast: true });
});

Pageclick = function (pageindex ){
// Pageindex is the page which was clicked
// Now you must load the page with Ajax
// Here I didn't do it
$ ("# Result" example .html ("this is page" + pageindex );
}
</SCRIPT>

4. The jquery library must be introduced before Js. I use 1.3.2.