jQuery实现的简单分页示例
本文实例讲述了jQuery实现的简单分页。分享给大家供大家参考，具体如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>JS分页Class-风干的果子</title>
<styletype="text/css">
a{margin:3px;text-decoration:none;}
</style>
<scripttype="text/javascript"src="jquery.min.js"></script>
<scripttype="text/javascript">
//jquery页面加载开始
$(function()
{
varpageDiv1=newjsPage("list","all","p1","3");
pageMethod.call(pageDiv1);
varpageDiv2=newjsPage("list2","all","p2","5");
pageMethod.call(pageDiv2);
})//$
//jquery页面加载结束
//方法:pageMethod
functionpageMethod()
{
varobj=this;
obj.resetTotal();
obj.reloadpage("1",obj.list_class);
obj.page();//生成页码
ready2go.call(obj);
}
//方法:ready2go
functionready2go()
{
varobj=this;
$("#"+obj.page_obj_id+"a").live("click",function()
{//点击页码的时候跳到相应页
obj.target_p=parseInt($(this).attr("p"));
gotopage.call(obj,obj.target_p);
})
}
//方法:showClass
functionshowClass(list,x,pDiv,pSize){
varpObj=newjsPage(list,x,pDiv,pSize);
pageMethod.call(pObj);
}
//方法:jsPage
functionjsPage(list_id,list_class,page_obj_id,pagesize)
{
//list_id结果集UL的id
//list_class要显示的类别
//page_id存放页码的id
//pagesize每页显示多少条
this.list_obj_id=list_id;
this.list_Obj=$("#"+list_id);
this.li=$("#"+list_id+"li");
this.li.hide();
this.page_obj_id=page_obj_id;
this.page_obj=$("#"+page_obj_id);//存放页码的div
this.list_class=list_class;//类别
if(list_class=="all")
{
this.results=this.li.length;//总记录数等于所有记录
}
else
{
this.results=$("#"+list_id+"li."+list_class).length;//总记录数等于指定类别的li数
}
this.totalpage;//总页数
this.pagesize=pagesize;//每页记录数
this.cpage=1;//当前页,默认显示第一页
this.count;
this.target_p;
this.curcount;
this.outstr="";//输出页码html
}//jsPage结束
//方法:gotopage
functiongotopage(target){
this.cpage=target;//把页面计数定位到第几页
this.page();
this.reloadpage(target,this.list_class);
}
//给对象jsPage增加函数reloadpage
jsPage.prototype.reloadpage=function(p,resultType)
{
this.li.hide();
for(vari=this.pagesize*p-this.pagesize;i<this.pagesize*p;i++)
{
if(resultType=="all")
{
this.li.eq(i).show();
}else
{
$("#"+this.list_obj_id+"li."+resultType).eq(i).show();
}
}
}
//给对象jsPage增加函数resetTotal
jsPage.prototype.resetTotal=function()
{
if(this.results==0){
this.totalpage=0;
this.cpage=0;
}elseif(this.results<=this.pagesize)
{
this.totalpage=1;
}
elseif(parseInt(this.results/this.pagesize)==1)
{
this.totalpage=2;
}
elseif(parseInt(this.results/this.pagesize)>1&&this.results%this.pagesize==0){
this.totalpage=this.results/this.pagesize;
}
else
{
this.totalpage=parseInt(this.results/this.pagesize)+1;
}
}//resetTotal()
//jsPage对象增加函数page
jsPage.prototype.page=function()
{
if(this.totalpage<=10)
{//总页数小于十页页码以十页为单位
for(this.count=1;this.count<=this.totalpage;this.count++)
{
if(this.count!=this.cpage)
{
this.outstr=this.outstr+"<ahref='javascript:void(0)'p='"+this.count+"'>"+this.count+"</a>";
}else
{
this.outstr=this.outstr+"<spanclass='current'>"+this.count+"</span>";
}
}
}
if(this.totalpage>10)
{//总页数大于十页
if(parseInt((this.cpage-1)/10)==0)
{
for(this.count=1;this.count<=10;this.count++)
{
if(this.count!=this.cpage)
{
this.outstr=this.outstr+"<ahref='javascript:void(0)'p='"+this.count+"'>"+this.count+"</a>";
}
else
{
this.outstr=this.outstr+"<spanclass='current'>"+this.count+"</span>";
}
}
this.outstr=this.outstr+"<ahref='javascript:void(0)'p='"+this.count+"'>»</a>";
}
elseif(parseInt((this.cpage-1)/10)==parseInt(this.totalpage/10))
{
this.outstr=this.outstr+"<ahref='javascript:void(0)'p='"+(parseInt((this.cpage-1)/10)*10)+"'>«<\/a>";
for(this.count=parseInt(this.totalpage/10)*10+1;this.count<=this.totalpage;this.count++)
{
if(this.count!=this.cpage)
{
this.outstr=this.outstr+"<ahref='javascript:void(0)'p='"+this.count+"'>"+this.count+"</a>";
}
else
{
this.outstr=this.outstr+"<spanclass='current'>"+this.count+"</span>";
}
}
}
else
{
varlastP;
this.outstr=this.outstr+"<ahref='javascript:void(0)'p='"+(parseInt((this.cpage-1)/10)*10)+"'>«<\/a>";
for(this.count=parseInt((this.cpage-1)/10)*10+1;this.count<=parseInt((this.cpage-1)/10)*10+10;this.count++)
{
if(this.count!=this.cpage)
{
this.outstr=this.outstr+"<ahref='javascript:void(0)'p='"+this.count+"'>"+this.count+"</a>";
}
else
{
this.outstr=this.outstr+"<spanclass='current'>"+this.count+"</span>";
}
if(this.count==this.totalpage)
{
lastP="";
}
else
{
lastP="<ahref='javascript:void(0)'p='"+(this.count+1)+"'>»</a>";
}
}
this.outstr=this.outstr+lastP;
}
}
document.getElementById(this.page_obj_id).innerHTML="<div><spanid='info'>共"+this.totalpage+"页第"+this.cpage+"页<\/span>"+this.outstr+"<\/div>";
this.outstr="";
}
</script>
</head>
<body>
<aonclick="showClass('list','mm','p1','3')"href="#">美女</a><aonclick="showClass('list','gg','p1','3')"
href="#">帅哥</a><aonclick="showClass('list','all','p1','3')"href="#">全部</a><br/>
<ulid="list">
<liclass="mm">美女A</li>
<liclass="gg">帅哥A</li>
<liclass="mm">美女B</li>
<liclass="gg">帅哥B</li>
<liclass="mm">美女C</li>
<liclass="gg">帅哥C</li>
<liclass="mm">美女D</li>
<liclass="gg">帅哥D</li>
<liclass="mm">美女E</li>
<liclass="gg">帅哥E</li>
<liclass="mm">美女F</li>
<liclass="gg">帅哥F</li>
<liclass="mm">美女G</li>
<liclass="gg">帅哥G</li>
<liclass="mm">美女H</li>
<liclass="gg">帅哥H</li>
<liclass="mm">美女A</li>
<liclass="gg">帅哥A</li>
<liclass="mm">美女B</li>
<liclass="gg">帅哥B</li>
<liclass="mm">美女C</li>
<liclass="gg">帅哥C</li>
<liclass="mm">美女D</li>
<liclass="gg">帅哥D</li>
<liclass="mm">美女E</li>
<liclass="gg">帅哥E</li>
<liclass="mm">美女F</li>
<liclass="gg">帅哥F</li>
<liclass="mm">美女G</li>
<liclass="gg">帅哥G</li>
<liclass="mm">美女H</li>
<liclass="gg">帅哥H</li>
<liclass="mm">美女A</li>
<liclass="gg">帅哥A</li>
<liclass="mm">美女B</li>
<liclass="gg">帅哥B</li>
<liclass="mm">美女C</li>
<liclass="gg">帅哥C</li>
<liclass="mm">美女D</li>
<liclass="gg">帅哥D</li>
<liclass="mm">美女E</li>
<liclass="gg">帅哥E</li>
<liclass="mm">美女F</li>
<liclass="gg">帅哥F</li>
<liclass="mm">美女G</li>
<liclass="gg">帅哥G</li>
<liclass="mm">美女H</li>
<liclass="gg">帅哥H</li>
<liclass="mm">美女A</li>
<liclass="gg">帅哥A</li>
<liclass="mm">美女B</li>
<liclass="gg">帅哥B</li>
<liclass="mm">美女C</li>
<liclass="gg">帅哥C</li>
<liclass="mm">美女D</li>
<liclass="gg">帅哥D</li>
<liclass="mm">美女E</li>
<liclass="gg">帅哥E</li>
<liclass="mm">美女F</li>
<liclass="gg">帅哥F</li>
<liclass="gg">帅哥G</li>
<liclass="gg">帅哥H</li>
<liclass="gg">帅哥G</li>
</ul>
<br/>
<divid="p1">
</div>
<br/>
<br/>
<aonclick="showClass('list2','music','p2','5')"href="#">音乐</a><aonclick="showClass('list2','movie','p2','5')"
href="#">电影</a><aonclick="showClass('list2','all','p2','5')"href="#">全部</a><br/>
<ulid="list2">
<liclass="music">音乐A</li>
<liclass="movie">电影A</li>
<liclass="music">音乐B</li>
<liclass="movie">电影B</li>
<liclass="music">音乐C</li>
<liclass="movie">电影C</li>
<liclass="music">音乐D</li>
<liclass="movie">电影D</li>
<liclass="music">音乐E</li>
<liclass="movie">电影E</li>
<liclass="music">音乐F</li>
<liclass="movie">电影F</li>
</ul>
<br/>
<divid="p2">
</div>
</body>
</html>
PS：这里再为大家推荐几款代码格式化、美化工具，相信大家在以后的开发过程中会用得到：
在线JavaScript代码美化、格式化工具：
http://tools.jb51.net/code/js
JavaScript压缩/格式化/加密工具：
http://tools.jb51.net/code/jscompress
PHP代码在线格式化美化工具：
http://tools.jb51.net/code/phpformat
XML代码在线格式化美化工具：
http://tools.jb51.net/code/xmlcodeformat
json代码在线格式化/美化/压缩/编辑/转换工具：
http://tools.jb51.net/code/jsoncodeformat
在线JSON代码检验、检验、美化、格式化工具：
http://tools.jb51.net/code/json
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。