asp.net列表分页

1.分页方法

       public static string GetPageStr(int pageIndex, int pageCount)
        {
            if (pageCount == 1)
            {
                return "<a id=\"pageactive\" href=\"?page=1\">1</a>)";
            }
            int start = pageIndex - 2;//起始位置
            if (start < 1)
            {
                start = 1;
            }
            int end = start + 4;
            if (end > pageCount)
            {
                end = pageCount;
            }

            StringBuilder pageStr = new StringBuilder();
            
            if (pageIndex > 1)
            {
                pageStr.AppendFormat("<a id =\"pageprev\" href =\"?page={0}\" ><span class=\"yy-icon yy-pp\"></span></a>",pageIndex-1);
            }

            if (start>1)
            {
                pageStr.Append("<a href=\"?page=1\">1</a>");
            }
            for (int i = start; i<= end; i++)
            {
                //当前页没有超链接
                if (i == pageIndex)
                {
                    pageStr.AppendFormat("<a id=\"pageactive\" href=\"?page={0}\">{0}</a>",i);
                }
                else
                {
                    pageStr.Append(string.Format("<a href=\"?page={0}\">{0}</a>", i));
                }
            }
            if (end < pageCount)
            {
                pageStr.Append("<span>...</span>");
                pageStr.AppendFormat("<a href=\"?page={0}\">{0}</a>",pageCount);
            }

        if ((pageIndex < pageCount))
            {
                pageStr.AppendFormat("<a id =\"pagenext\" href=\"?page={0}\">
<span class=\"yy-icon yy-pp yy-rotate\"></span></a>", pageIndex+1);
            }
            return pageStr.ToString();
        }

2.前台绑定

<div id="pages">
    <%=PageStr%>
</div>

3css样式

#pages { margin-bottom: 40px; height: 36px; }
    #pages span { float: left; margin: 0 18px 0 13px; line-height: 28px; }
    #pages a { width: 36px; height: 36px; background: #fff; display: block; color: #a9a9a9; 
line-height: 36px; text-align: center; font-family: Arial; float: left; margin-right: 5px;
 transition: background-color 0.2s ease-out; }
        #pages a#pageactive { background: #70ca10; color: #fff; }
        #pages a:hover { background: #969696; color: #fff; }
#pageprev span { position: relative; top: 8px; }
#pagenext span { position: relative; top: 8px; }
.yy-icon { display: inline-block; overflow: hidden; background-repeat: no-repeat; background-image: 
url(../images/yy-icon.png); }
.yy-pp { width: 11px; height: 18px; background-position: -124px -656px; }
.yy-rotate { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); }

4图片

5.分页效果图