jQuery实现的简单分页示例
本文实例讲述了jQuery实现的简单分页。分享给大家供大家参考，具体如下：
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\"
\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<title>JS分页Class - 风干的果子</title>
<style type=\"text/css\">
a {margin:3px; text-decoration:none;}
</style>
<script type=\"text/javascript\" src=\"jquery.min.js\"></script>
<script type=\"text/javascript\">
//jquery页面加载开始
$(function()
{
var pageDiv1=new jsPage(\"list\",\"all\",\"p1\",\"3\");
pageMethod.call(pageDiv1);
var pageDiv2=new jsPage(\"list2\",\"all\",\"p2\",\"5\");
pageMethod.call(pageDiv2);
})//$
//jquery 页面加载结束
//方法: pageMethod
function pageMethod()
{
var obj=this;
obj.resetTotal();
obj.reloadpage(\"1\",obj.list_class);
obj.page(); //生成页码
ready2go.call(obj);
}
//方法:ready2go
function ready2go()
{
var obj=this;
$(\"#\"+obj.page_obj_id+\" a\").live(\"click\",function()
{ //点击页码的时候跳到相应页
obj.target_p=parseInt($(this).attr(\"p\"));
gotopage.call(obj,obj.target_p);
})
}
// 方法: showClass
function showClass(list,x,pDiv,pSize){
var pObj=new jsPage(list,x,pDiv,pSize);
pageMethod.call(pObj);
}
// 方法: jsPage
function jsPage(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
function gotopage(target){
this.cpage = target; //把页面计数定位到第几页
this.page();
this.reloadpage(target,this.list_class);
}
//给对象jsPage 增加函数 reloadpage
jsPage.prototype.reloadpage=function(p,resultType)
{
this.li.hide();
for(var i=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;
}else if(this.results<=this.pagesize)
{
this.totalpage=1;
}
else if(parseInt(this.results/this.pagesize)==1)
{
this.totalpage=2;
}
else if(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 + \"<a href=\'javascript:void(0)\' p=\'\"+this.count+\"\' >\"+this.count+\"</a>\";
}else
{
this.outstr = this.outstr + \"<span class=\'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 + \"<a href=\'javascript:void(0)\' p=\'\"+this.count+\"\' >\"+this.count+\"</a>\";
}
else
{
this.outstr = this.outstr + \"<span class=\'current\'>\"+this.count+\"</span>\";
}
}
this.outstr = this.outstr + \"<a href=\'javascript:void(0)\' p=\'\"+this.count+\"\' >»</a>\";
}
else if(parseInt((this.cpage-1)/10) == parseInt(this.totalpage/10))
{
this.outstr = this.outstr + \"<a href=\'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 + \"<a href=\'javascript:void(0)\' p=\'\"+this.count+\"\' >\"+this.count+\"</a>\";
}
else
{
this.outstr = this.outstr + \"<span class=\'current\'>\"+this.count+\"</span>\";
}
}
}
else
{
var lastP;
this.outstr = this.outstr + \"<a href=\'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 + \"<a href=\'javascript:void(0)\' p=\'\"+this.count+\"\' >\"+this.count+\"</a>\";
}
else
{
this.outstr = this.outstr + \"<span class=\'current\'>\"+this.count+\"</span>\";
}
if(this.count==this.totalpage)
{
lastP=\"\";
}
else
{
lastP=\"<a href=\'javascript:void(0)\' p=\'\"+(this.count+1)+\"\' >»</a>\";
}
}
this.outstr = this.outstr + lastP;
}
}
document.getElementById(this.page_obj_id).innerHTML = \"<div><span id=\'info\'>共\"+this.totalpage+\"页 第\"+this.cpage+\"页<\\/span>\" + this.outstr + \"<\\/div>\";
this.outstr = \"\";
}
</script>
</head>
<body>
<a onclick=\"showClass(\'list\',\'mm\',\'p1\',\'3\')\" href=\"#\">美女</a> <a onclick=\"showClass(\'list\',\'gg\',\'p1\',\'3\')\"
href=\"#\">帅哥</a> <a onclick=\"showClass(\'list\',\'all\',\'p1\',\'3\')\" href=\"#\">全部</a><br />
<ul id=\"list\">
<li class=\"mm\">美女A</li>
<li class=\"gg\">帅哥A</li>
<li class=\"mm\">美女B</li>
<li class=\"gg\">帅哥B</li>
<li class=\"mm\">美女C</li>
<li class=\"gg\">帅哥C</li>
<li class=\"mm\">美女D</li>
<li class=\"gg\">帅哥D</li>
<li class=\"mm\">美女E</li>
<li class=\"gg\">帅哥E</li>
<li class=\"mm\">美女F</li>
<li class=\"gg\">帅哥F</li>
<li class=\"mm\">美女G</li>
<li class=\"gg\">帅哥G</li>
<li class=\"mm\">美女H</li>
<li class=\"gg\">帅哥H</li>
<li class=\"mm\">美女A</li>
<li class=\"gg\">帅哥A</li>
<li class=\"mm\">美女B</li>
<li class=\"gg\">帅哥B</li>
<li class=\"mm\">美女C</li>
<li class=\"gg\">帅哥C</li>
<li class=\"mm\">美女D</li>
<li class=\"gg\">帅哥D</li>
<li class=\"mm\">美女E</li>
<li class=\"gg\">帅哥E</li>
<li class=\"mm\">美女F</li>
<li class=\"gg\">帅哥F</li>
<li class=\"mm\">美女G</li>
<li class=\"gg\">帅哥G</li>
<li class=\"mm\">美女H</li>
<li class=\"gg\">帅哥H</li>
<li class=\"mm\">美女A</li>
<li class=\"gg\">帅哥A</li>
<li class=\"mm\">美女B</li>
<li class=\"gg\">帅哥B</li>
<li class=\"mm\">美女C</li>
<li class=\"gg\">帅哥C</li>
<li class=\"mm\">美女D</li>
<li class=\"gg\">帅哥D</li>
<li class=\"mm\">美女E</li>
<li class=\"gg\">帅哥E</li>
<li class=\"mm\">美女F</li>
<li class=\"gg\">帅哥F</li>
<li class=\"mm\">美女G</li>
<li class=\"gg\">帅哥G</li>
<li class=\"mm\">美女H</li>
<li class=\"gg\">帅哥H</li>
<li class=\"mm\">美女A</li>
<li class=\"gg\">帅哥A</li>
<li class=\"mm\">美女B</li>
<li class=\"gg\">帅哥B</li>
<li class=\"mm\">美女C</li>
<li class=\"gg\">帅哥C</li>
<li class=\"mm\">美女D</li>
<li class=\"gg\">帅哥D</li>
<li class=\"mm\">美女E</li>
<li class=\"gg\">帅哥E</li>
<li class=\"mm\">美女F</li>
<li class=\"gg\">帅哥F</li>
<li class=\"gg\">帅哥G</li>
<li class=\"gg\">帅哥H</li>
<li class=\"gg\">帅哥G</li>
</ul>
<br />
<div id=\"p1\">
</div>
<br />
<br />
<a onclick=\"showClass(\'list2\',\'music\',\'p2\',\'5\')\" href=\"#\">音乐</a> <a onclick=\"showClass(\'list2\',\'movie\',\'p2\',\'5\')\"
href=\"#\">电影</a> <a onclick=\"showClass(\'list2\',\'all\',\'p2\',\'5\')\" href=\"#\">全部</a><br />
<ul id=\"list2\">
<li class=\"music\">音乐A</li>
<li class=\"movie\">电影A</li>
<li class=\"music\">音乐B</li>
<li class=\"movie\">电影B</li>
<li class=\"music\">音乐C</li>
<li class=\"movie\">电影C</li>
<li class=\"music\">音乐D</li>
<li class=\"movie\">电影D</li>
<li class=\"music\">音乐E</li>
<li class=\"movie\">电影E</li>
<li class=\"music\">音乐F</li>
<li class=\"movie\">电影F</li>
</ul>
<br />
<div id=\"p2\">
</div>
</body>
</html>
PS：这里再为大家推荐几款代码格式化、美化工具，相信大家在以后的开发过程中会用得到：
在线JavaScript代码美化、格式化工具：
http://tools.phpstudy.net/code/js
JavaScript压缩/格式化/加密工具：
http://tools.phpstudy.net/code/jscompress
PHP代码在线格式化美化工具：
http://tools.phpstudy.net/code/phpformat
XML代码在线格式化美化工具：
http://tools.phpstudy.net/code/xmlcodeformat
json代码在线格式化/美化/压缩/编辑/转换工具：
http://tools.phpstudy.net/code/jsoncodeformat
在线JSON代码检验、检验、美化、格式化工具：
http://tools.phpstudy.net/code/json
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
本文地址：https://www.stayed.cn/item/5517
转载请注明出处。
本站部分内容来源于网络,如侵犯到您的权益,请 联系我
我的博客
人生若只如初见，何事秋风悲画扇。
我的标签
随笔档案
- 2024-02(2)
- 2023-06(1)
- 2023-05(1)
- 2023-04(14)
- 2023-03(3)
- 2023-01(6)
- 2022-12(5)
- 2022-11(5)
- 2022-07(2)
- 2022-06(4)
- 2022-05(3)
- 2022-03(1)
- 2021-12(6)
- 2021-11(1)
- 2021-10(3)
- 2021-09(5)
- 2021-07(5)
- 2021-02(2)
- 2021-01(7)
- 2020-12(18)
- 2020-11(14)
- 2020-10(12)
- 2020-09(10)
- 2020-08(22)
- 2020-07(2)
- 2020-06(1)
- 2020-04(5)
- 2020-03(9)
- 2020-02(7)
- 2020-01(9)
- 2019-12(8)
- 2019-11(10)
- 2019-10(11)
- 2019-09(17)
- 2019-08(16)
- 2019-07(6)
- 2019-06(3)
- 2019-04(1)
- 2019-03(8)
- 2019-02(5)
- 2019-01(1)
- 2018-11(2)
- 2018-10(3)
- 2018-09(1)
- 2018-08(3)
- 2018-07(3)
- 2018-06(7)
- 2018-04(4)
- 2018-03(5)
- 2018-02(4)
- 2018-01(22)
- 2017-12(3)
- 2017-11(5)
- 2017-10(15)
- 2017-09(26)
- 2017-08(1)
- 2017-07(3)