js分页例子-白红宇

js分页例子

阅读量：5819 次

发布时间：2019-06-18

本文共 7057 字，大约阅读时间需要 23 分钟。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<head>

<title>JS分页Class - 风干的果子</title>

a {margin:3px; text-decoration:none;}

</style>

//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 每页显示多少条

// QQ群号: 29032448

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 οnclick="showClass('list','mm','p1','3')" href="#">美女</a> <a οnclick="showClass('list','gg','p1','3')"

href="#">帅哥</a> <a οnclick="showClass('list','all','p1','3')" href="#">全部</a><br />

</ul>

<br />

</div>

<br />

<a οnclick="showClass('list2','music','p2','5')" href="#">音乐</a> <a οnclick="showClass('list2','movie','p2','5')"

href="#">电影</a> <a οnclick="showClass('list2','all','p2','5')" href="#">全部</a><br />

</ul>

<br />

</div>

</body>

</html>

转载地址：http://nmwdx.baihongyu.com/

你可能感兴趣的文章

android第十一期 - SmoothSwitchLibrary仿IOS切换Activity动画效果

查看>>

zabbix 批量web url监控

查看>>

大容量导入和导出数据 -- 格式化文件生成

查看>>

MongoDB CookBook读书笔记之导入导出

查看>>

mysql高可用方案之Keepalived+主主复制

听比喻，懂原理（1）超五类双绞线和六类双绞线的区别

Ninject 2.x细说---2.绑定和作用域

查看>>

30个非常时尚的网页联系表单设计优秀示例

查看>>

使用membership(System.Web.Security)来进行角色与权限管理

Frank Klemm's Dither and Noise Shaping Page: Dither and Noise Shaping In MPC/MP+

查看>>

Rational Rose 2003 下载、破解及安装方法（图文）

查看>>

网络抓包的部署和工具Wireshark【图书节选】

查看>>