JS paging components and supporting CSS styles (calculated by JS pages)

------------------------------------------ JS --------------------------------------------------
Function createpage (showcount, pagecount, count ){
VaR html = '<Div class = "pages"> ';
HTML + = '<a href = "javascript: void (0)" onclick = "firstpage ()" id = "firstpage" class = ". prev "> homepage </a> ';
HTML + = '<a href = "javascript: void (0)" onclick = "uppage ()" id = "uppage"> previous page </a> ';
HTML + = '<a href = "javascript: void (0)" id = "downpage" onclick = "next ()"> next page </a> ';
HTML + = '<a href = "javascript: void (0)" onclick = "lastpage ()" id = "lastpage"> last page </a> ';
HTML + = '<label> & nbsp; displayed on each page :';
HTML + = '<select id = "showcount" value = "' + showcount + '" onchange = "changcount (this) "> <option value =" 10 "> 10 </option> </SELECT> entries ';
HTML + = '</label> & nbsp ;';
HTML + = '<label> total records: <label id = "count">' + Count + '</label> <label> & nbsp; & nbsp; current <label id = "pagecount"> '+ pagecount +' </label> page </label> ';
HTML + = '</div> ';
Return HTML;
}

Function tobottom (){
Document.doc umentelement. scrolltop = 1500 + "PX ";
}

 

// This method is a display form that obtains data through Ajax.
Function showpageview (START, end ){

// Display the form area (dispatchrisktable)

Dispatchrisktable. cleardata ();
VaR jsondata = eval ('+ datalist + ')');
VaR jsondatalist = jsondata ['baseinfolist'];

VaR length = jsondatalist. length> end? End: jsondatalist. length;

For (VAR I = start; I <length; I ++ ){
Dispatchrisktable. adddataobject (jsondatalist [I]);
}
Dispatchrisktable. showall ();

}

Function firstpage (){
Getelement ('pagecount'). innertext = '1 ';
Showpageview (0, number (getelement ('showcount'). Value ));

}

Function uppage (){
If (number (getelement ('pagecount'). innertext)-1) <= 0 ){
Return;
}
Getelement ('pagecount'). innertext = (number (getelement ('pagecount'). innertext)-1 );
Showpageview (number (getelement ('pagecount'). innertext)-1) * Number (getelement ('showcount'). value)
, (Number (getelement ('pagecount'). innertext) * Number (getelement ('showcount'). value ));
}

Function next (){
If (number (getelement ('pagecount '). innertext) * Number (getelement ('showcount '). value)> = Number (getelement ('Count '). innertext )){
Return;
}
Getelement ('pagecount'). innertext = Number (getelement ('pagecount'). innertext) + 1;
Showpageview (number (getelement ('pagecount'). innertext)-1) * Number (getelement ('showcount'). value)
, (Number (getelement ('pagecount'). innertext) * Number (getelement ('showcount'). value ));
}

Function lastpage (){
VaR text = Number (getelement ('Count'). innertext)/number (getelement ('showcount'). Value) + "";
TEXT = text. substring (0, text. indexof ('.'));

If (number (getelement ('Count'). innertext) % Number (getelement ('showcount'). Value) = 0 ){

Getelement ('pagecount'). innertext = text;
} Else {
Getelement ('pagecount'). innertext = Number (text) + 1;
}

Showpageview (number (getelement ('pagecount '). innertext)-1) * Number (getelement ('showcount '). value), (Number (getelement ('pagecount '). innertext) * Number (getelement ('showcount '). value ));
}

Function changcount (element ){
Getelement ('pagecount'). innertext = 1;
Showpageview (number (getelement ('pagecount '). innertext)-1) * Number (element. value), (Number (getelement ('pagecount '). innertext) * Number (element. value ));
}

Function getelement (ID ){
Return document. getelementbyid (ID );
}

----------------------------------------- CSS ---------------------------------------------------
. Pages {width: 972px; Height: 25px; overflow: hidden; text-align: center; line-Height: 25px; font-family: verdana ;}
. Pages a,. Pages strong {margin: 0 1px; padding: 2px 6px; Border: 1px solid # e4e4e4; text-Decoration: none! Important ;}
. Pages a: hover {border-color: #369 ;}
. Pages strong {border-color: #369; Background: #369; color: # FFF ;}
. Pages. Prev {padding: 4px 6px 2px 20px! Important; padding: 4px 6px 0 20px; Background: URL (images/arrow_left.gif) No-repeat 9% 50%; font-family: simsun ;}
. Pages. Next {padding: 4px 20px 2px 6px! Important; padding: 4px 20px 0 6px; Background: URL (images/arrow_right.gif) No-repeat 91% 50%; font-family: simsun ;}
. Pages label {color: # 0063dc; text-Decoration: none ;}