JavaScript显示分页结果--PowerBy 叶子(酷酷叶,showo)

javascript显示分页结果

建立时间:2004-4-22 最后修改:2004-4-26

NB联盟-酷酷叶(QQ:311673)(自己也不知道算不算原创,反正没有抄别人的,如果别人写过,就算....)

昨天急需一段js显示分页结果的代码,找来找去没有满意的,想想,自己写一个算了.源代码如下:蓝色部分为注释

<Script Language=JavaScript>
url=""+document.location; //取得当前页面url
if (url.indexOf("page=")==-1) //判断有没有page=
{
CurrentPage=1;
}
else
{
    var re=/(\S.*)(page=\d*)(\S.*|\S*)/g; //正则"page=数字"部分
    var CurrentPage=url.replace(re,"$2");
    url=url.replace("&"+CurrentPage,""); //替换掉"&page=数字"部分
    url=url.replace(CurrentPage+"&",""); //替换掉"page=数字&"部分
    url=url.replace(CurrentPage,""); //替换掉"page=数字"部分
   CurrentPage=CurrentPage.replace("page=","") //取得的"page=数字"部分,得到page值
//以上红色部分,如果客户端浏览器是ie6/mozilla1.6/netscape7以及以上版本,可以用下面注释的5行替代(下面红色部分在ie5测试失败,主要是正则部分)
//var re=/(?:\S{1,}page=|\D.*)/g;
//var CurrentPage=url.replace(re,"");
//url=url.replace("&page="+CurrentPage,"");
//url=url.replace("page="+CurrentPage+"&","");
//url=url.replace("page="+CurrentPage,"");
if (CurrentPage.length>=1) //取得page的长度,如果大于等于1(也就是有字符情况)
    {
      CurrPage=parseInt(CurrentPage); //格式化字符
     if(isNaN(CurrPage))   //如果不是数值型
      {
        CurrPage=1;
       }
    }
    else //如果没有字符,则默认为第一页
   {
     CurrPage=1;
    }
}
if (url.indexOf("?")==-1) //判断url有没有?部分,没有则添加,有则加"&"
{
url=url+"?";
}
else
{
url=url+"&";
}
url=url.replace("?&","?"); //去掉多余"&"

function checkpage() //检查表单提交
{
document.iform.action=url+'&page='+document.iform.ipage.value;
document.iform.submit();
}
function //函数主题部分
showo_page(Tabstart,Tabend,CurrPageFont1,CurrPageFont2,PageCountFont1,PageCountFont2,PrePageFont1,PrePageFont2,RecCountFont1,RecCountFont2
//函数主题部分(开头部分,结尾部分,当前页字体和问题说明开头1,结束2,页数字体开头1,    结束2                  每页记录数目字体开头1,结束2   记录数目字体开头1,结束2
,FirstFont,PrevFont,NextFont,LastFont,Jump,PageNumFont1,PageNumFont2,LinkFont1,LinkFont2,LinkFont3,LinkFont4,RecCount,RecPerPage,PageNum)
//首页     上一页       下一页    尾页        跳转   类似45,46,47页数部分的字体设置有超连接的字体1,2 无超连接的字体3,4 记录总数    每页记录数    前后显示的页数
{
if (RecCount%RecPerPage==0) //根据总记录和每页显示的记录条数,计算总页数
{
PageCount=RecCount/RecPerPage;
}
else
{
PageCount=(parseInt(RecCount/RecPerPage)+1);
}
if (CurrPage>=PageCount)   //如果当前页数大于总页数
{
CurrPage=PageCount;    //默认为最后一页//下面判断显示首页,上一页,下一页,尾页部分
FirstPageUrl=LinkFont1+"<a href='"+url+"page=1'>"+FirstFont+"</a>"+LinkFont2;
PrevPageUrl=LinkFont1+"<a href='"+url+"page="+parseInt(CurrPage-1)+"'>"+PrevFont+"</a>"+LinkFont2;
NextPageUrl=LinkFont3+NextFont+LinkFont4;
LastPageUrl=LinkFont3+LastFont+LinkFont4;
}
else if (CurrPage<=1) //如果当前页小于1
{
CurrPage=1; //默认为第一页
FirstPageUrl=LinkFont3+FirstFont+LinkFont4;
PrevPageUrl=LinkFont3+PrevFont+LinkFont4;
NextPageUrl=LinkFont1+"<a href='"+url+"page=2'>"+NextFont+"</a>"+LinkFont2;
LastPageUrl=LinkFont1+"<a href='"+url+"page="+PageCount+"'>"+LastFont+"</a>"+LinkFont2;
}
else    //在中间的情况
{
CurrPage=CurrPage;
FirstPageUrl=LinkFont1+"<a href='"+url+"page=1'>"+FirstFont+"</a>"+LinkFont2;
PrevPageUrl=LinkFont1+"<a href='"+url+"page="+parseInt(CurrPage-1)+"'>"+PrevFont+"</a>"+LinkFont2;
NextPageUrl=LinkFont1+"<a href='"+url+"page="+parseInt(CurrPage+1)+"'>"+NextFont+"</a>"+LinkFont2;
LastPageUrl=LinkFont1+"<a href='"+url+"page="+PageCount+"'>"+LastFont+"</a>"+LinkFont2;
}
if (CurrPage-PageNum<=1) //计算中间显示页数数字的开始数字
{
PageStart=1;
}
else
{
PageStart=CurrPage-PageNum;
}
if (CurrPage+PageNum>=PageCount) //计算中间显示页数数字的结束数字
{
PageEnd=PageCount;
}
else
{
PageEnd=CurrPage+PageNum;
}
showo="<form method='post' name='iform' action=''>"+Tabstart; //计算中间显示页数数字的开始数字下面开始按顺序显示
showo=showo+CurrPageFont1+CurrPage+CurrPageFont2+PageCountFont1+PageCount+PageCountFont2+PrePageFont1;
showo=showo+RecPerPage+PrePageFont2+RecCountFont1+RecCount+RecCountFont2+FirstPageUrl+PrevPageUrl;
for (i=PageStart;i<=PageEnd;i++) //显示中间页数数字
{
if (i==CurrPage)    //如果是当前页,则不显示超连接
{
showo=showo+LinkFont3+i+LinkFont4;
}
else //否则显示超连接
{
showo=showo+LinkFont1+"<a href='"+url+"page="+i+"'>"+i+"</a>"+LinkFont2;
}
}
showo=showo+NextPageUrl+LastPageUrl+Jump; //显示最后的结束和页面跳转部分
showo=showo+"<input type=text name=ipage size=3 maxlength=10><input type=submit value=Go name=submit onClick='return checkpage()'>"+Tabend+"</form>";
document.write (showo); //输出
}
</Script>

调用示范:

<Script Language=JavaScript>
showo_page("","","页次:<font color='red'>","</font>/","<font color='red'>","</font>页 "," 每页<font color='red'>","</font>条 "," 共<font color='red'>","</font>个记录  ","首页","上一页","下一页","尾页","  跳转:"," <font color='red'>","</font> "," [<font color='red'>","</font>] "," "," ",9999,99,4)
</Script>

效果1:记录总数12345678,每页123记录,前后显示2个

测试通过:
1:win2000+ie6(zh-cn)/ie5.0(zh-cn)/netscape7.0(zh-cn)/msn explore9(zh-cn)/mozilla1.6(en);
2:winxp pro+ie6(zh-cn)/netscape7.0(zh-cn)/mozilla1.5(en);
3:win98+ie5(zh-cn);

源代码以及示范页面:http://www.showo.com/produce/page/showpage.htm

版权:本文是NB联盟(www.54NB.com)-酷酷叶的原创文章,欢迎各网站转载,请务必保留版权信息,媒体杂志转载前请先与本人联系.
感谢NB联盟-国哥的正则处理部分:P 　