Jquery paging objects are used as examples
- 2020-03-30 02:32:35
- OfStack
Usage method and related parameters are as follows:
DisplayId // default display area Id is pageBox, you can not fill in
Pagesize // the number of pages per page, the default is 15, can not be filled
Totalsize / / the total number of article
Curpage // current pages
Simple // the default is false, true does not have the previous page and the next page,
Type //0 defaults to an HTTP jump, and 1 is the JSP page must have a pageCallBack(pageNum) function, starting at 1
Url // link address, if the type is 1, you can not fill in here
Example: Page. _run ({totalsize: 300, curpage: 11, type: 1, simple: true}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page object </title>
<style>
.pageBox,.pageBox1{ text-align:center; height:25px; padding:15px 0;}
.pageBox .pages a.up,.pageBox .pages a.down{ color:#6eb4ea; text-decoration:none; border:1px solid #ffffff; background:none;}
.pageBox .pages a.else{ background:none; border:none;}
.pageBox .pages a{ padding:3px 7px; border:1px solid #f3f6f6; background:#fdfdfd; margin:0 5px; color:#999999;}
.pageBox .pages a:hover,.pageBox .pages a.hover{ background:#6eb4ea; border:1px solid #6eb4ea; color:#ffffff; text-decoration:none;padding:2px 7px; }
pageBox .pages span{ padding:3px 7px; color:#999999;}
.fiv_sep{ height:3px; float:left; width:100%; font-size:4px; line-height:2px;}
</style>
<script type="text/javascript" src="../jquery/jquery.js"></script><!--jquery support 1.4 The above version -->
</head>
<body>
<h1>Page</h1>
<div class="pageBox" id="pageBox"></div>
<script type="text/javascript">
var Page = {
/**
displayId//The default value of the display area Id is pageBox, you can not fill in
pagesize//The number of entries per page, 15 by default, is optional.
totalsize//The total number of article
curpage//The current number of pages
simple//The default is false, true is not on the previous page or the next page,
type//0 default to go HTTP jump, 1 is the JSP page must have a pageCallBack(pageNum) function, starting from 1
url//Link address, if the type in and out of 1 here can not be filled
Example: Page._run({totalsize:300,curpage:11,type:1,simple:true}
*/
_run:function(param){
var totalpages = 1,//Total number of pages
displayId="#pageBox",//Display area id&cake;
pagesize=15,//Number of strips per page & NBSP;
totalsize=0,//The total number of article
curpage=1,//The current number of pages
url="",//Link address & NBSP;
type=0,//0 defaults to an HTTP jump, and 1 passes in the callback function
simple=false;//Simple version, no previous page and no next page
if(param.type!=undefined)type=param.type;
if(param.displayId!=undefined)displayId=param.displayId;
if(param.pagesize!=undefined)pagesize=param.pagesize;
if(param.totalsize!=undefined)totalsize=param.totalsize;
if(param.curpage!=undefined)curpage=param.curpage;
if(param.url!=undefined)url=param.url;
if(param.simple!=undefined)simple=param.simple;
if(url.indexOf("?")==-1){
url += "?1=1";
}
if(totalsize>0){
totalpages = Page._getTotalPages(totalsize,pagesize);
if(curpage>totalpages){curpage=totalpages;}// Incoming pages greater than Total number of pages On the last page
if(totalpages>1){
var firstPage= simple?"":Page._builderPageArea(type,"up",url,curpage-1," The previous page ",false,displayId),
lastPage = simple?"":Page._builderPageArea(type,"down",url,parseInt(curpage)+1," The next page ",false,displayId),pages = new Array();
if(curpage<=4){//There is no previous page on the first page
if(curpage!=1){pages.push(firstPage);}
if(totalpages>5){//Total number of pages More than 5
for(var i=1;i<=5;i++){
if(curpage==i){
pages.push(Page._builderPageArea(type,"",url,i,i,true,displayId));
}else{
pages.push(Page._builderPageArea(type,"",url,i,i,false,displayId));
}
}
pages.push('<span>...</span>');
pages.push(Page._builderPageArea(type,"",url,totalpages,totalpages,false,displayId));
}else{//Total number of pages<=5 Column, 1,2 . 3,4 . 5
for(var i=1;i<=totalpages;i++){
if(curpage==i){
pages.push(Page._builderPageArea(type,"",url,i,i,true,displayId));
}else{
pages.push(Page._builderPageArea(type,"",url,i,i,false,displayId));
}
}
}
if(curpage!=totalpages)pages.push(lastPage);
}else if(totalpages-curpage<=4){//Last page without another & NBSP;
if(curpage!=1){pages.push(firstPage);}
if(totalpages>5){//Total number of pages More than 5
pages.push(Page._builderPageArea(type,"",url,1,1,false,displayId));
pages.push('<span>...</span>');
for(var i=totalpages-4;i<=totalpages;i++){
if(curpage==i){
pages.push(Page._builderPageArea(type,"",url,i,i,true,displayId));
}else{
pages.push(Page._builderPageArea(type,"",url,i,i,false,displayId));
}
}
if(totalpages!=curpage) {pages.push(lastPage);}
}else{//Total number of pages<=5 Column, 1,2 . 3,4 . 5
for(var i=1;i<=totalpages;i++){
if(curpage==i){
pages.push(Page._builderPageArea(type,"",url,i,i,true,displayId));
}else{
pages.push(Page._builderPageArea(type,"",url,i,i,false,displayId));
}
}
if(curpage!=totalpages)pages.push(lastPage);
}
}else{// There is the previous page and the last page and Total number of pages Certainly more than 5
pages.push(firstPage);
pages.push(Page._builderPageArea(type,"",url,1,1,false,displayId));
pages.push('<span>...</span>');
for(var i=curpage-2;i<=curpage+2;i++){
if(curpage==i){
pages.push(Page._builderPageArea(type,"",url,i,i,true,displayId));
}else{
pages.push(Page._builderPageArea(type,"",url,i,i,false,displayId));
}
}
pages.push('<span>...</span>');
pages.push(Page._builderPageArea(type,"",url,totalpages,totalpages,false,displayId));
pages.push(lastPage);
}
var result = new Array();
result.push('<div class="pages">');
result.push(pages.join(''));
result.push('</div>');
$(displayId).html(result.join(''));
}
}else{
}
},
_getTotalPages:function(_totalsize,_pagesize){
if(_totalsize%_pagesize==0)
return _totalsize/_pagesize;
else
return parseInt(_totalsize/_pagesize)+1;
},
_builderPageArea:function(type,textType,url,page,text,_focus,_displayId){
var hrefStr,href= new Array();
if(type==0){
href.push(url);
href.push('&pagenum=');
href.push(page);
}else if(type==1){
href.push('javascript:void(0);pageCallBack(\'');
href.push(page);
href.push('\',\'');
href.push(_displayId);
href.push('\')');
}
hrefStr = href.join(''),result=new Array();
if(textType=='up'){
result.push('<a href="');
result.push(hrefStr);
result.push('" class="up"> The previous page </a>');
}else if(textType=='down'){
result.push('<a href="');
result.push(hrefStr);
result.push('" class="down"> The next page </a>');
}else{
result.push('<a href="');
result.push(hrefStr);
if(_focus){
result.push('" style="background:#6EB4EA;color:#FFF;">');
}else{
result.push('">');
}
result.push(page);
result.push('</a>');
}
return result.join('');
}
};
Page._run({totalsize:100,curpage:1,pagesize:10});
</script>
</body>
</html>