博客园分页导航之我见

博客园里用的分页导航控件，我大胆地猜测应该是通过后台程序代码，然后在页面上输出html标签。我发现它与新浪的分页导航非常相像，不过后者是通过JavaScript创建分页导航。

这种分页导航有4种状态：

1、不带省略号的

2、省略号在右边

3、省略号在左边

4、省略号在两边

下面是我根据这4种状态，写出的分页导航代码，欢迎园友们多多指点^_^

 

#pager
{
    font-size: 12px;
    margin: 25px 0;
    text-align: center;
    color: #2E6AB1;
    line-height: 200%;
}
#pager a
{
    border: 1px solid #9AAFE5;
    color: #2E6AB1;
    margin-right: 4px;
    padding: 2px 8px;
    text-decoration: none;
}
#pager a:hover
{
    border: 1px solid #2E6AB1;
    color: #363636;
}
#pager span.current
{
    background-color: #2E6AB1;
    border: 1px solid navy;
    color: #FFFFFF;
    font-weight: bold;
    margin-right: 4px;
    padding: 2px 8px;
}

页面代码：

 

<div id="pager_block">
    <div id='pager'>
       分页导航Html标签存放位置
    </div>
</div>

程序代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Text;

public class Pager
{
    /// <summary>
    /// 创建分页导航Html标签
    /// </summary>
    /// <param name="pageIndex">索引页码,从1开始</param>
    /// <param name="pageCount">总页数</param>
    /// <param name="showPageCount">显示分页个数(奇数)</param>
    /// <returns></returns>
    public static string Build(int pageIndex, int pageCount, int showPageCount)
    {
        if (pageCount == 1)
            return "";

        StringBuilder sb = new StringBuilder();

        int span = showPageCount / 2;  //前后对称的个数

        int from, to;

        if (pageCount > showPageCount + 1)  //导航中出现省略号
        {
            if (pageIndex <= span + 1)  //省略号出现在右边
            {
                from = 1; to = showPageCount;

                if (pageIndex != 1)
                    sb.AppendFormat("<a href='Default.aspx?page={0}'>上一页</a>", pageIndex - 1);

                sb.Append(ShowPageNavigation(pageIndex, from, to));

                sb.Append("...");

                sb.AppendFormat("<a href='Default.aspx?page={0}'>{0}</a>", pageCount);

                sb.AppendFormat("<a href='Default.aspx?page={0}'>下一页</a>", pageIndex + 1);

            }
            else if (pageIndex >= pageCount - span)  //省略号出现在左边
            {
                from = pageCount + 1 - showPageCount; to = pageCount;

                sb.AppendFormat("<a href='Default.aspx?page={0}'>上一页</a>", pageIndex - 1);

                sb.Append("<a href='Default.aspx'>1</a>");

                sb.Append("...");

                sb.Append(ShowPageNavigation(pageIndex, from, to));

                if (pageIndex != pageCount)
                    sb.AppendFormat("<a href='Default.aspx?page={0}'>下一页</a>", pageIndex + 1);
            }
            else  //省略号出现在两边
            {
                from = pageIndex - span; to = pageIndex + span;

                sb.AppendFormat("<a href='Default.aspx?page={0}'>上一页</a>", pageIndex - 1);

                sb.Append("<a href='Default.aspx'>1</a>");

                sb.Append("...");

                sb.Append(ShowPageNavigation(pageIndex, from, to));

                sb.Append("...");

                sb.AppendFormat("<a href='Default.aspx?page={0}'>{0}</a>", pageCount);

                sb.AppendFormat("<a href='Default.aspx?page={0}'>下一页</a>", pageIndex + 1);

            }
        }
        else  //导航中不出现省略号
        {
            from = 1; to = pageCount;

            if (pageIndex != 1)
                sb.AppendFormat("<a href='Default.aspx?page={0}'>上一页</a>", pageIndex - 1);

            sb.Append(ShowPageNavigation(pageIndex, from, to));

            if (pageIndex != pageCount)
                sb.AppendFormat("<a href='Default.aspx?page={0}'>下一页</a>", pageIndex + 1);
        }

        return sb.ToString();
    }

    private static string ShowPageNavigation(int pageIndex, int from, int to)
    {
        StringBuilder sb = new StringBuilder();

        for (int i = from; i <= to; i++)
        {
            if (i == pageIndex)
            {
                sb.AppendFormat("<span class='current'>{0}</span>", i);
            }
            else
            {
                sb.AppendFormat("<a href='Default.aspx?page={0}'>{0}</a>", i);
            }
        }

        return sb.ToString();
    }
}

#pager
{
    font-size: 12px;
    margin: 25px 0;
    text-align: center;
    color: #2E6AB1;
    line-height: 200%;
}
#pager a
{
    border: 1px solid #9AAFE5;
    color: #2E6AB1;
    margin-right: 4px;
    padding: 2px 8px;
    text-decoration: none;
}
#pager a:hover
{
    border: 1px solid #2E6AB1;
    color: #363636;
}
#pager span.current
{
    background-color: #2E6AB1;
    border: 1px solid navy;
    color: #FFFFFF;
    font-weight: bold;
    margin-right: 4px;
    padding: 2px 8px;
}