jquery分页对象使用示例
2023-06-13 09:15:24 时间
使用方法和相关参数如下：
displayId//默认值显示区域Id为pageBox，可以不填
pagesize//每页条数，默认是15条，可以不填
totalsize//总条数
curpage//当前页数
simple//默认是false，true没有上一页和下一页，
type//0默认走http跳转，1是jsp页面必须有pageCallBack(pageNum)函数,从1开始
url//链接地址，如果type出入1此处就可以不填
例子：Page._run({totalsize:300,curpage:11,type:1,simple:true}
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<title>Page对象</title>
<style>
.pageBox,.pageBox1{text-align:center;height:25px;padding:15px0;}
.pageBox.pagesa.up,.pageBox.pagesa.down{color:#6eb4ea;text-decoration:none;border:1pxsolid#ffffff;background:none;}
.pageBox.pagesa.else{background:none;border:none;}
.pageBox.pagesa{padding:3px7px;border:1pxsolid#f3f6f6;background:#fdfdfd;margin:05px;color:#999999;}
.pageBox.pagesa:hover,.pageBox.pagesa.hover{background:#6eb4ea;border:1pxsolid#6eb4ea;color:#ffffff;text-decoration:none;padding:2px7px;}
pageBox.pagesspan{padding:3px7px;color:#999999;}
.fiv_sep{height:3px;float:left;width:100%;font-size:4px;line-height:2px;}
</style>
<scripttype="text/javascript"src="../jquery/jquery.js"></script><!--jquery支持1.4以上版本-->
</head>
<body>
<h1>Page</h1>
<divclass="pageBox"id="pageBox"></div>
<scripttype="text/javascript">
varPage={
/**
displayId//默认值显示区域Id为pageBox，可以不填
pagesize//每页条数，默认是15条，可以不填
totalsize//总条数
curpage//当前页数
simple//默认是false，true没有上一页和下一页，
type//0默认走http跳转，1是jsp页面必须有pageCallBack(pageNum)函数,从1开始
url//链接地址，如果type出入1此处就可以不填
例子：Page._run({totalsize:300,curpage:11,type:1,simple:true}
*/
_run:function(param){
vartotalpages=1,//总页数
displayId="#pageBox",//显示区域Id
pagesize=15,//每页条数
totalsize=0,//总条数
curpage=1,//当前页数
url="",//链接地址
type=0,//0默认走http跳转，1传入回调函数
simple=false;//简单版本，没有上一页和下一页
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;}//传入页数大于总页数，就按最后一页算
if(totalpages>1){
varfirstPage=simple?"":Page._builderPageArea(type,"up",url,curpage-1,"上一页",false,displayId),
lastPage=simple?"":Page._builderPageArea(type,"down",url,parseInt(curpage)+1,"下一页",false,displayId),pages=newArray();
if(curpage<=4){//第一页无上一页
if(curpage!=1){pages.push(firstPage);}
if(totalpages>5){//总页数超过5
for(vari=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{//总页数<=5的，列1,2，3,4，5
for(vari=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);
}elseif(totalpages-curpage<=4){//最后一页无下一页
if(curpage!=1){pages.push(firstPage);}
if(totalpages>5){//总页数超过5
pages.push(Page._builderPageArea(type,"",url,1,1,false,displayId));
pages.push("<span>...</span>");
for(vari=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{//总页数<=5的，列1,2，3,4，5
for(vari=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{//有上一页和最后一页且总页数肯定大于5
pages.push(firstPage);
pages.push(Page._builderPageArea(type,"",url,1,1,false,displayId));
pages.push("<span>...</span>");
for(vari=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);
}
varresult=newArray();
result.push("<divclass="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
returnparseInt(_totalsize/_pagesize)+1;
},
/**构造分页的每个页数区域*/
_builderPageArea:function(type,textType,url,page,text,_focus,_displayId){
varhrefStr,href=newArray();
if(type==0){
href.push(url);
href.push("&pagenum=");
href.push(page);
}elseif(type==1){
href.push("javascript:void(0);pageCallBack(\\"");
href.push(page);
href.push("\\",\\"");
href.push(_displayId);
href.push("\\")");
}
hrefStr=href.join(""),result=newArray();
if(textType=="up"){
result.push("<ahref="");
result.push(hrefStr);
result.push(""class="up">上一页</a>");
}elseif(textType=="down"){
result.push("<ahref="");
result.push(hrefStr);
result.push(""class="down">下一页</a>");
}else{
result.push("<ahref="");
result.push(hrefStr);
if(_focus){
result.push(""style="background:#6EB4EA;color:#FFF;">");
}else{
result.push("">");
}
result.push(page);
result.push("</a>");
}
returnresult.join("");
}
};
Page._run({totalsize:100,curpage:1,pagesize:10});
</script>
</body>
</html>
相关文章
- jQuery WeUI：WeUI 的jQuery实现版
- jQuery对象转化成DOM对象的方法
- Jquery学习笔记（一）
- JQuery操作Javascript对象和数组的工具函数小结
- JQuery插件模板制作jquery插件的朋友可以参考下
- jQuery获取对象定位子对象
- jQuery对象和DOM对象使用说明
- jquery.validate使用攻略第二部
- jQuery对象[0]是什么含义？
- 基于jQuery的一个扩展form序列化到json对象
- 通过AJAX的JS、JQuery两种方式解析XML示例介绍
- jquery$.each和for怎么跳出循环终止本次循环
- 通过length属性判断jquery对象是否存在
- 利用js(jquery)操作Cookie的方法说明
- 编写高效jQuery代码的4个原则和5个技巧
- Jquery图片延迟加载插件jquery.lazyload.js的使用方法
- jquery修改网页背景颜色通过css方法实现
- jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
- jQuery如何将选中的对象转化为原始的DOM对象
- Jquery$.ajax函数外的一段代码的执行顺序
- jQuery重复加载错误以及修复方法
- Jquery通过JSON字符串创建JSON对象
- jquery单行文字向上滚动效果的实现代码