一個封裝好的CSS分頁導覽列

效果請看 http://blog.csdn.net/greystar/archive/2008/04/08/2260363.aspx

 

page.css

#channel-page
{
 height:22px;
 margin:5px auto;
 padding:0px;
  text-align:center;
  line-height:20px;
  width:500px;
}

#channel-page ul#channel-page-show
{
     line-height:20px;
     margin: 0px auto;
     list-style-type: none;
   
     padding:0px;
     text-align:center;
     width:100%;
     height:22px;
}
#channel-page ul#channel-page-show li
{
     display: inline;
     float: left;
     width: 23px;
     padding: 0px 2px;
  margin:2px 0px;
   height:20px;
  text-align:center;
   
}
#channel-page ul#channel-page-show li a
{
      border: solid 1px  #999 ;
     display: block;
     font-weight: 700;
     font-size: 12px;
     width: 20px;
     color: #666;
    height:20px;
     background-color: #fff;
     text-align: center;
     text-decoration: none;
    
}
#channel-page ul#channel-page-show li a:hover
{
     font-size: 20px;
     z-index: 100;
     width: 40px;
     line-height: 40px;
     position: absolute;
     height: 40px;
     margin-top: -10px;
     margin-right: 0px;
     margin-bottom: 0px;
     margin-left: -10px;
      background-color: #fff;
   
}
#channel-page ul#channel-page-show li a.page-select
{
     color: red;
    
}
#channel-page ul#channel-page-show li#channel-page-count
{
      border: solid 1px  #999 ;
     font-weight: 700;
     font-size: 12px;
     width: 50px;
     color: #666;
     height:20px;
     line-height:20px;
     background-color: #fff;
     text-align: center;
     text-decoration: none;
     padding :0px;
   margin:2px 3px;
   float:left;
     
}

#channel-page ul#channel-page-show li#channel-page-form
{
     border: solid 1px  #999 ;
     display: block;
     font-size: 12px;
     width: 60px;
     color: #666;
 float:left;
     background-color: #fff;
     text-decoration: none;
     padding: 0px;
     margin-right: 1px;
     margin-left: 2px;
   white-space:nowrap;
    vertical-align:middle;
  
}

#channel-page-form input#pagenum
{
 width: 25px;
 float:left;
 border:solid 1px  #FFF    ;
  vertical-align:middle;
  margin:0px 0px;
 color: #666;
}
#channel-page-form input#navButton
{
 
     width: 25px;
     float:left;
     background-color: #FFF;
     font-size: 14px;
     border: 1px solid #FFF;
     color: #666;
     height:20px;
}

 

pagebar.cs代碼如下

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Finstone.Common.Control
{
    [DefaultProperty("Text")]
    [ToolboxData("<{0}:PageBar runat=server></{0}:PageBar>")]
    public class PageBar : WebControl
    {
        public PageBar() : base(HtmlTextWriterTag.Div) {
         
            this.Style.Add("text-align", "center");
            this.Style.Add("margin", "2px auto");
         
          
        }
        int page = 1;
        [Bindable(true)]
        [Category("Appearance")]
        [DefaultValue("")]
        [Localizable(true)]
        public string Text
        {
            get
            {
                String s = (String)ViewState["Text"];
                return ((s == null) ? String.Empty : s);
            }

            set
            {
                ViewState["Text"] = value;
            }
        }
        protected override void OnLoad(EventArgs e)
        {
           
            base.OnLoad(e);
            if (Page.Request.QueryString["page"] != null)
            {
                CurrentPage = int.Parse(Page.Request.QueryString["page"].ToString());
            }
             page = CurrentPage;
        }
        protected override void OnPreRender(EventArgs e)
        {
            string cssurl = this.Page.ClientScript.GetWebResourceUrl(this.GetType(), "Finstone.Common.pagebar.css");
Finstone.Common.Web.Util.AddCSS(cssurl, this.Page);

            base.OnPreRender(e);
        }

        protected override void RenderContents(HtmlTextWriter output)
        {

              StringBuilder sb = new StringBuilder();

            int num = 1;
            int allcount = AllCount;
            int pagesize = PageSize;
          
          
            num = Finstone.Common.Web.Util.GetPageCount(allcount, pagesize); //根據頁尺寸來算出有多少頁
          
            int szPage = page;

            sb.Append("<div id=/"channel-page/">");
            sb.Append("<ul id=/"channel-page-show/">");
            sb.Append("<li id=/"channel-page-count/">" + page + "/" + num + "</li>"); //全部頁
            sb.Append("<li><a target='_self' href='" + Finstone.Common.Web.Util.UpdateParam("page", "1") + "'>&lt;&lt;</a></li>");//第一頁

            if (szPage > 1)
            {
                sb.Append("<li><a target='_self' href='" + Finstone.Common.Web.Util.UpdateParam("page", (szPage - 1).ToString()) + "'>&lt;</a></li>");//上一頁
            }

            //這裡要算出開始頁碼和最後的頁碼 最多10頁
            int startIndex = 0;
            int endIndex = 0;
            if (szPage <= 10)
            {
                startIndex = 0;
                endIndex = num < 10 ? num : 10;
            }
            else
            {
                startIndex = szPage - 5;
                endIndex = num < szPage + 5 ? num : szPage + 5;
            }

            for (int i = startIndex; i <= endIndex - 1; i++)
            {
                int szContent = i + 1;
                if (szContent == page)
                {
                    sb.Append("<li><a class=/"page-select/" ' href='javascript:void(0);'>" + szContent + "</a></li>");
                }
                else
                {
                    sb.Append("<li><a target='_self' href='" + Finstone.Common.Web.Util.UpdateParam("page", szContent.ToString()) + "'>" + szContent + "</a></li>");
                }
            }

            if (szPage < num)
            {
                sb.Append("<li><a target='_self' href='" + Finstone.Common.Web.Util.UpdateParam("page", (szPage + 1).ToString()) + "'>&gt;</a></li>");//後一頁
            }

            sb.Append("<li><a target='_self' href='" + Finstone.Common.Web.Util.UpdateParam("page", num.ToString()) + "'>&gt;&gt;</a></li>");//最後一頁

            if (ShowNavBar)
            {
                string s = "";
                sb.Append("<li id=/"channel-page-form/">");
                string url = RebuildUrl();
                sb.Append("<input name=/"pagenum/" type=/"text/" id=/"pagenum/" maxlength=/"5/"><input type=/"button/" id=/"navButton/" value=/"GO/" onclick=/"var intstr=/^//d+$/;if(intstr.test(pagenum.value)&&pagenum.value<=" + num + "&&pagenum.value>=1){location.href='" + url + "'+pagenum.value;}/"></li>");

            }
           

            sb.Append("</ul>");
            sb.Append("</div>");
     
            output.Write(sb.ToString());
        }

      

        string RebuildUrl()
        {
            string url = this.Page.Request.CurrentExecutionFilePath+"?";
            if (this.Page.Request.QueryString.Count > 0)
            {

                foreach (string s in this.Page.Request.QueryString.AllKeys)
                {
                    if (s.ToUpper() != "PAGE")
                    {
                        url += s + "=" + Page.Request.QueryString[s].ToString() + "&";
                    }
                }
                //url = url.TrimEnd('&');
              

            }
          
                url += "page=";
          
            return url;
        }
        public int AllCount
        {
            get
            {
                if (ViewState["allcount"] == null)
                    return 0;
                return (int)ViewState["allcount"];
            }
            set
            {
                ViewState["allcount"] = value;
            }
        }
        public int CurrentPage
        {
            get {
                if (ViewState["page"] == null)
                    return 1;
                return (int)ViewState["page"];
            }
            set {
                ViewState["page"] = value;
            }
       
        }
       

        public int PageSize
        {
            get {
                if (ViewState["pagesize"] == null)
                    return 10;
              return (int)ViewState["pagesize"];
              
            }
            set {
                ViewState["pagesize"] = value;
            }
          
        }
       
        public bool ShowNavBar
        {
            get
            {
                if (ViewState["shownavbar"] != null)
                {
                    return (bool)ViewState["shownavbar"];
                }
                else
                    return false;
              
            }
            set
            {
                ViewState["shownavbar"] = value;
            }
        }
 
         

    }
}

AssemblyInfo.cs中加入下一行代碼

[assembly: WebResource("Finstone.Common.pagebar.css", "text/css")]

注意,請將page.css檔案作為資源檔,

用的時候只要設 AllCount Currentpage,pagesize 幾個屬性就可以了