KCMT开源控件之--方便简洁的分页控件

KMCT名字的由来，这是我在Blog中的第一篇关于控件的文章，在此我将对我的控件做一个申明，控件名字以我的Blog名字各项的首字母命名(Keyboard,Mouse,Cigarette,Tea )希望大家在以后看我的控件的时候能想到我的Blog。同时我选择了开源，开源更能促进技术的发展，也更能到达资源共享的目的。

废话少说、直接进入主题，今天整理的是分页控件，这个控件诞生将近一年了，是我和我的一个同事共同开发，现在被广泛用于公司的各个项目中。控件基于.net 2.0 开发。

先从宏观上分析一下分页控件：作为分页控件应该具有每一页的大小（Pagesize）、总页数（TotalPage）等属性。

从实现上说我们在以前的分页过程中都是像这样传递参数xxxx.aspx?page=1，那么我们只要改变page参数的值便可以实现分页的效果，因此我们只需要继承System.Web.UI.Control控件并重写Render()方法即可实现该功能。

贴出代码：

Code
using System;
using System.Text;
using System.Text.RegularExpressions;

namespace KMCT.Control
{
    /// <summary>
    /// 该控件为分页控件，其特点是分页方便，轻量级
    /// </summary>
    public class Pager : System.Web.UI.Control
    {

        private int _pageSize, _totalPage;
        private static readonly Regex RX;
        private string query;
        private int curretPage;
        private int myTotalPage;
        //Filed
        public int TotalPage
        {
            get { return _totalPage; }
            set { _totalPage = value; }
        }

        public int PageSize
        {
            get { return _pageSize; }
            set { _pageSize = value; }
        }


        static Pager() { RX = new Regex(@"^&page=\d+", RegexOptions.Compiled); }
        public Pager()
        {
            query = Context.Request.Url.Query.Replace("?", "&");
            query = RX.Replace(query, string.Empty);
            string myPage = Context.Request["page"];
            if (string.IsNullOrEmpty(myPage))
                curretPage = 0;
            else
            {
                try
                {
                    curretPage = int.Parse(myPage);
                }
                catch
                {
                    Context.Response.Redirect(Regex.Replace(Context.Request.Url.ToString(), @"page=[^&]+", "page=0"));
                }
            }
        }

        protected override void Render(System.Web.UI.HtmlTextWriter writer)
        {
            if ((this._totalPage % this._pageSize) == 0)
            {
                myTotalPage = this._totalPage / this._pageSize;
            }
            else
                myTotalPage = this._totalPage / this._pageSize + 1;
            string str = "<div class='digg'>";
            if (this._pageSize > this._totalPage)
            {
                str += "";
            }
            else
            {
                if (this._totalPage <= this._pageSize * 10)
                {
                    if (this.curretPage == 0)
                        str += "<span class='disabled'> < </span>";
                    else
                        str += "<a href='?page=" + (curretPage - 1) + this.query + "'> < </a>";
                    for (int i = 0; i < myTotalPage; i++)
                    {
                        if (curretPage == i)
                            str += "<span class='current'>" + (i + 1) + "</span>";
                        else
                            str += "<a href='?page=" + i + this.query + "'>" + (i + 1) + "</a>";
                    }
                    if (this.curretPage < myTotalPage - 1)
                        str += "<a href='?page=" + (curretPage + 1) + this.query + "'> > </a>";
                    else
                        str += "<span class='disabled'> > </span>";
                }
                else
                {
                    if (this.curretPage == 0)
                        str += "<span class='disabled'> < </span>";
                    else
                        str += "<a href='?page=" + (curretPage - 1) + this.query + "'> < </a>";
                    if (this.curretPage < 4)
                    {
                        for (int i = 0; i < 5; i++)
                        {
                            if (curretPage == i)
                                str += "<span class='current'>" + (i + 1) + "</span>";
                            else
                                str += "<a href='?page=" + i + this.query + "'>" + (i + 1) + "</a>";
                        }
                        str += "<a href='?page=" + myTotalPage + this.query + "'>" + myTotalPage + "</a>";
                    }
                    else if (this.curretPage >= 4 && this.curretPage < myTotalPage - 6)
                    {
                        str += "<a href='?page=1" + this.query + "'>1</a>";
                        for (int i = -2; i < 3; i++)
                        {
                            if (i == 0)
                                str += "<span class='current'>" + (this.curretPage + 1) + "</span>";
                            else
                                str += "<a href='?page=" + (this.curretPage + i) + this.query + "'>" + (this.curretPage + 1 + i) + "</a>";
                        }
                        str += "<a href='?page=" + (myTotalPage - 1) + this.query + "'>" + myTotalPage + "</a>";
                    }
                    else if (curretPage > myTotalPage + 1)
                    {
                        Context.Response.Redirect(Regex.Replace(Context.Request.Url.ToString(), @"page=\d+", "page=" + (myTotalPage - 1)));
                    }
                    else
                    {
                        str += "<a href='?page=1" + this.query + "'>1</a>";
                        for (int i = 6; i > 0; i--)
                        {
                            if (curretPage == myTotalPage - i)
                                str += "<span class='current'>" + (myTotalPage - i + 1) + "</span>";
                            else
                                str += "<a href='?page=" + (myTotalPage - i) + this.query + "'>" + (myTotalPage - i + 1) + "</a>";
                        }
                    }
                    if (this.curretPage < myTotalPage - 1)
                        str += "<a href='?page=" + (curretPage + 1) + this.query + "'> > </a>";
                    else
                        str += "<span class='disabled'> > </span>";

                }
            }
            str += "</div>";
            writer.Write(str);
        }
    }
}

 

调用代码：

 

Code
<%@ Register Assembly="Control" Namespace="KMCT.Control" TagPrefix="KMCT" %>
    <KMCT:Pager ID="Pager1" runat="server" PageSize="10" TotalPage="185">
    </KMCT:Pager>

 

效果预览：

最后附上css文件：

 

Code
        DIV.digg
        {
            padding-right: 3px;
            padding-left: 3px;
            padding-bottom: 3px;
            margin: 3px;
            padding-top: 3px;
            text-align: right;
        }
        DIV.digg A
        {
            border-right: #aaaadd 1px solid;
            padding-right: 5px;
            border-top: #aaaadd 1px solid;
            padding-left: 5px;
            padding-bottom: 2px;
            margin: 2px;
            border-left: #aaaadd 1px solid;
            color: #000099;
            padding-top: 2px;
            border-bottom: #aaaadd 1px solid;
            text-decoration: none;
        }
        DIV.digg A:hover
        {
            border-right: #000099 1px solid;
            border-top: #000099 1px solid;
            border-left: #000099 1px solid;
            color: #000;
            border-bottom: #000099 1px solid;
        }
        DIV.digg A:active
        {
            border-right: #000099 1px solid;
            border-top: #000099 1px solid;
            border-left: #000099 1px solid;
            color: #000;
            border-bottom: #000099 1px solid;
        }
        DIV.digg SPAN.current
        {
            border-right: #000099 1px solid;
            padding-right: 5px;
            border-top: #000099 1px solid;
            padding-left: 5px;
            font-weight: bold;
            padding-bottom: 2px;
            margin: 2px;
            border-left: #000099 1px solid;
            color: #fff;
            padding-top: 2px;
            border-bottom: #000099 1px solid;
            background-color: #000099;
        }
        DIV.digg SPAN.disabled
        {
            border-right: #eee 1px solid;
            padding-right: 5px;
            border-top: #eee 1px solid;
            padding-left: 5px;
            padding-bottom: 2px;
            margin: 2px;
            border-left: #eee 1px solid;
            color: #ddd;
            padding-top: 2px;
            border-bottom: #eee 1px solid;
        }

 

希望大家提出宝贵的意见很建议，我会把这个控件做得更加完善。

下一篇文章我将简单介绍存储过程分页的几种方式，同时配合该分页控件的案例。