一种论坛流行的 Pager 演示

Pager 有很多种形式，诸如：用“上一页”、“下一页”进行翻页的、用数字显示所有页进行翻页的、利用下拉列表框进行翻页的……还有一种更合理的，它用数字显示当前页的附近几页的，但是就是这种也有多种形式，下面用 JavaScript 演示其中一种形式，算法不复杂，权作抛砖引玉，望多多指教。

<!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>
    <title>Pager - 千一网络</title>
    <style type="text/css">
    .item
    {
        width:25px;
        border:1px solid #009999;
        background-color:#FFFFFF;
        color:#000000;
        text-align:center;
        vertical-align:middle;
        font-size:13px;
        cursor:pointer;
    }
    
    .itemOver
    {
        width:25px;
        border:1px solid #009999;
        background-color:#00FFFF;
        color:#000000;
        text-align:center;
        vertical-align:middle;
        font-size:13px;
        cursor:pointer;
    }
    
    .current
    {
        background-color:#00CCCC;
        color:#FFFFFF;
    }
    </style>
</head>
<body>

<p>下面利用 JavaScript 生成了四个 Pager，只作演示用。</p>
<div id="p1"></div>
<div id="p2"></div>
<div id="p3"></div>
<div id="p4"></div>

<script type="text/javascript">
<!--
//千一网络 www.cftea.com
function getPager(page, pageCount)
{
    var result = "";
    
    var navPageCount = 7; //显示多少个分页数字，= navHeadPageCount + 1 + navTailPageCount
    var navHeadPageCount = 3; //当前页数字之前有多少个分页数字
    var navTailPageCount = navPageCount - 1 - navHeadPageCount; //当前页数字之后有多少个分页数字
    
    var navStartPage = 1; //显示的第一个分页数字是多少，由 page、pageCount、navPageCount、navHeadPageCount、navTailPageCount 得出
    var navEndPage = pageCount; //显示的最后一个分页数字是多少，由 page、pageCount、navPageCount、navHeadPageCount、navTailPageCount 得出
    
    //初步确定 navHeadPageCount 的值
    if ((page -1) < navHeadPageCount)
    {
        //page 之前不足以显示那么多个数字，减少 navHeadPageCount，并把多出来的数字分给 navTailPageCount
        navHeadPageCount = page - 1;
        navTailPageCount = navPageCount - 1 - navHeadPageCount;
    }
    
    //确定 navTailPageCount、navHeadPageCount 的值
    if ((pageCount - page) < navTailPageCount)
    {
        //page 之后不足以显示那么多个数字，减少 navTailPageCount，并把多出来的数字分给 navHeadPageCount（也许 navHeadPageCount 能接受）
        navTailPageCount = (pageCount - page)
        navHeadPageCount = navPageCount - 1 - navTailPageCount;
        if ((page - 1) < navHeadPageCount)
        {
            //多了，navTailPageCount 给的数字不能或不能完全接受
            navHeadPageCount = page - 1;
        }
    }
    
    
    navPageCount = navHeadPageCount + 1 + navTailPageCount; //最终 navPageCount 的值是多少
    navStartPage = page - navHeadPageCount;
    navEndPage = page + navTailPageCount;
    
    for (var i=navStartPage; i<=navEndPage; i++)
    {
        
        if (i != page)
        {
            result += "<td class=\"item\" onmouseover=\"javascript:this.className='itemOver';\" onmouseout=\"javascript:this.className='item';\">" + i + "</td>";
        }
        else
        {
            result += "<td class=\"item current\">" + i + "</td>";
        }
    }
    
    if (navStartPage > 1)
    {
        result = "<td class=\"item\" onmouseover=\"javascript:this.className='itemOver';\" onmouseout=\"javascript:this.className='item';\">1</td>" +
                 "<td class=\"item\" onmouseover=\"javascript:this.className='itemOver';\" onmouseout=\"javascript:this.className='item';\">&lt;&lt;</td>" +
                 result;
    }
    if (navEndPage < pageCount)
    {
        result = result +
                 "<td class=\"item\" onmouseover=\"javascript:this.className='itemOver';\" onmouseout=\"javascript:this.className='item';\">&gt;&gt;</td>" +
                 "<td class=\"item\" onmouseover=\"javascript:this.className='itemOver';\" onmouseout=\"javascript:this.className='item';\">" + pageCount + "</td>";
    }
    
    return "<table><tr>" + result + "</tr></table>";
}


document.getElementById("p1").innerHTML = getPager(2, 8);
document.getElementById("p2").innerHTML = getPager(15, 18);
document.getElementById("p3").innerHTML = getPager(23, 40);
document.getElementById("p4").innerHTML = getPager(1, 1);
-->
</script>

</body>
</html>

[Ctrl+A 全部选择提示：您可先修改部分代码，再按运行]

ASP.NET 中的 AJAX	ASP.NET 画图全接触	ASP.NET 与 XML	声明式数据绑定	ASP.NET 网页抓取
C# 基础	C# 类教程	C# 加密	ASP.NET 成员资格	非“自动化”处理 Excel
QuickAjax	Ajax	完美的语法高亮器	Silverlight	Popfly