您当前位置：首页 > web前端 > jquery > 以jQuery为基础的js分页代码

以jQuery为基础的js分页代码

来源：程序员人生发布时间：2014-04-01 03:54:10 阅读次数：2769次

　　网(LieHuo.Net)教程因为项目需要，今天用了一天时间,开发了一个js分页控件自认为还算可以，发到网上请朋友们下载使用，“大家好才是真的好”。首先来看一下运行效果如下图所示。

　　使用也十分的简单首先引入jQuery.js文件然后考入本程序的代码：

以下为引用的内容：
<script type="text/javascript">
function showpage(CountPage,PageSize,CurentPage)
{
var tempHTML="";
if(CountPage<=PageSize)
{
if(CurentPage>1)
{
tempHTML = '<a href="javascript:showpage('+CountPage+','+PageSize+','+eval(CurentPage-1)+')">previous</a>';
}
else
{
tempHTML = '<a href="javascript:">previous</a>'
}

for(i=1;i<=CountPage;i++)
{
if(i==CurentPage)
{
tempHTML = tempHTML+' <a href="javascript:">'+i+'</a>';
}
else
{
tempHTML = tempHTML+'<a href="javascript:showpage('+CountPage+','+PageSize+','+i+')">'+i+'</a>';
}
}
if(CurentPage<CountPage)
{
tempHTML = tempHTML+'<a href="javascript:showpage('+CountPage+','+PageSize+','+eval(CurentPage+1)+')">Next</a>';
}
else
{
tempHTML = tempHTML+'<a href="javascript:">Next</a>';
}
$("#pagelist").html(tempHTML);
return;
}

//头
if(CurentPage>1)
{
tempHTML = '<a href="javascript:showpage('+CountPage+','+PageSize+','+eval(CurentPage-1)+')">previous</a>';
}
else
{
tempHTML = '<a href="javascript:">previous</a>';
}
if(CurentPage==1)
{
tempHTML = tempHTML+'<a href="javascript:">1</a>';
}
else
{
tempHTML = tempHTML+'<a href="javascript:showpage('+CountPage+','+PageSize+',1)">1</a>';
}
var LeftCount=0;
var RightCount=0;
var IfDOT_L=0;
var IfDOT_R=0;
var middle = parseInt(PageSize/2);

LeftCount=CurentPage-1;
RightCount = CountPage-CurentPage;

if((LeftCount>middle)&&(RightCount>middle))
{
LeftCount = middle;
RightCount= PageSize-1-LeftCount;
IfDOT_L=1;
IfDOT_R=1;
}
else
{
if(LeftCount<RightCount)
{
if(LeftCount>parseInt(PageSize/2))
{
LeftCount = parseInt(PageSize/2);
}
RightCount = PageSize-1-LeftCount;
}
else
{
if(RightCount>parseInt(PageSize/2))
{
RightCount = parseInt(PageSize/2);
}
LeftCount = PageSize-1-RightCount;
}
if(CurentPage-1>LeftCount)
{
IfDOT_L=1;
}
if(CountPage-CurentPage>RightCount)
{
IfDOT_R=1;
}
}

//左侧
if(IfDOT_L==1)
{
tempHTML = tempHTML+"...";
for(i=CurentPage-LeftCount+2;i<CurentPage;i++)
{
tempHTML = tempHTML+'<a href="javascript:showpage('+CountPage+','+PageSize+','+i+')">'+i+'</a>';
}
}
else
{
for(i=2;i<CurentPage;i++)
{
tempHTML = tempHTML+'<a href="javascript:showpage('+CountPage+','+PageSize+','+i+')">'+i+'</a>';
}
}

//当前页
if(CurentPage!=1&&CurentPage!=CountPage)
{
tempHTML = tempHTML+'<a href="javascript:">'+CurentPage+'</a>';
}
//右侧
if(IfDOT_R==1)
{
for(i=CurentPage+1;i<CurentPage+RightCount-1;i++)
{
tempHTML = tempHTML+'<a href="javascript:showpage('+CountPage+','+PageSize+','+i+')">'+i+'</a>';
}
tempHTML = tempHTML+"...";
}
else
{
for(i=CurentPage+1;i<CurentPage+RightCount;i++)
{
tempHTML = tempHTML+'<a href="javascript:showpage('+CountPage+','+PageSize+','+i+')">'+i+'</a>';
}
}

//尾
if(CurentPage==CountPage)
{
tempHTML = tempHTML+'<a href="javascript:">'+CountPage+'</a>';
}
else
{
tempHTML = tempHTML+'<a href="javascript:showpage('+CountPage+','+PageSize+','+CountPage+')">'+CountPage+'</a>';
}
if(CurentPage<CountPage)
{
tempHTML = tempHTML+'<a href="javascript:showpage('+CountPage+','+PageSize+','+eval(CurentPage+1)+')">Next</a>';
}
else
{
tempHTML = tempHTML+'<a href="javascript:">Next</a>';
}
$("#pagelist").html(tempHTML);
}
</script>

　　调用时主要使用如下调用
　　showpage(100,13,4);
　　其中第一个参数表示分页总数，第二个参数表示当前页面显示的页码数，第三个参数表示当前页。

　　源文件下载地址：点击下载此文件

　　文章来自：http://www.cnblogs.com/studyplay/

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

------分隔线----------------------------

上一篇 Sybase数据库修复及 sa 用户口令的恢复

下一篇 从“车震门”事件闲谈互联网事件营销

分享到:

------分隔线----------------------------

为码而活

积分：4237

15粉丝

7关注

栏目热点