分页控件（后台拼接html方式）

　　    这是第一次发博客：先说下我写博的意义：

　　　　1：整理原先有道笔记上记录得非常杂乱的知识点

　　　　2：坐等大神的拍砖，完善记录上的不足

　　　　3：便于自己找工作时填充简历

　　　　　首先整理的是关于分页控件，之前在项目中使用的分页控件从形式上基本可以规划为三类：1.后台拼接html（也就是本篇要叙述的）2.自定义分页控件3.第三方控件（如:easyUi的分页控件）。

　　　　　 我这里用的是PetaPoco（小型，开源的ORM框架）的分页模型：

               

    public class Page<T>
    {
        /// <summary>
        /// 当前页码
        /// </summary>
        public long CurrentPage 
        { 
            get; 
            set; 
        }

        /// <summary>
        /// 总页码
        /// </summary>
        public long TotalPages 
        { 
            get; 
            set; 
        }

        /// <summary>
        /// 总记录数
        /// </summary>
        public long TotalItems 
        { 
            get; 
            set; 
        }

        /// <summary>
        /// 每页显示记录数
        /// </summary>
        public long ItemsPerPage 
        { 
            get; 
            set; 
        }

        /// <summary>
        /// 记录集合
        /// </summary>
        public List<T> Items 
        { 
            get; 
            set; 
        }

        /// <summary>
        /// 任何自定义值
        /// </summary>
        public object Context 
        { 
            get; 
            set; 
        }
    }

 　　　　　  1.首先获取数据

　　　　　　　　　

Page<UsersT> pf = db.Page<UsersT>(crt, ts, "select * from userst order by id  desc");

　　　　　　2.拼接html（要非常仔细，不然很容易出错）

　　　　　　　　　　

            StringBuilder html = new StringBuilder();
            html.Append(string.Format("<div class="summary">当前{2}/{1}页 共{0}条记录</div>", pf.TotalItems, pf.TotalPages, pf.CurrentPage));
            html.Append(" ");
            html.AppendFormat("每页:<input type="text" value="{0}" id="pageSize" name="pageSize" size="1"/>", pf.ItemsPerPage); 
            html.Append("<a href="#">上一页</a>"); 
            int startnum = (int)pf.CurrentPage - 3;
            if ((pf.TotalPages < 3) || ((pf.CurrentPage - 3) < 1))
            {
                startnum = 1;
            }
            if (pf.CurrentPage + 3 >= pf.TotalPages)
            {
                startnum = (int)(pf.TotalPages) - 3;
            } 
            for (int i = startnum; i <= startnum + 3; i++)
            { 
                if (pf.CurrentPage != i)
                {
                    html.AppendFormat("<a href="#" page="{0}" class="bt">{0}</a>", i);
                }
                else
                {
                    html.AppendFormat("<a href="" class="hot">{0}</a>", i);
                } 
            }
            html.Append("<a href="#">下一页</a>");
            html.Append("<a href="#">末页</a>");
            html.AppendFormat("跳转到:<input type="text" value="{0}" id="pageNumber" totalPages="{1}" name="pageNumber" size="1"/>页", pf.CurrentPage, pf.TotalPages);
            //前台控件
            Literal1.Text = html.ToString();   

 　　　　　 3.前台html

　　　　　　　　　　

    　       <div class="page">
              　　<asp:Literal Text="" runat="server"  ID="Literal1"/>
             </div>    

 　　　　　 4:引入css样式（注意和原有的冲突）

　　　　　　　　　　

/*分页*/
.batch{ cursor:pointer;}
.dataListEdit{ height:36px; line-height:36px; background:#f8f8f8; margin-left:15px; padding:0px 0px 0px 0px; position:relative;}
.dataListEdit .batch{ background:#1c587b; height:20px; line-height:20px; margin:8px 6px 8px 0px; color:#FFF; padding:0 10px; display:block; float:left;}
.page{ position:absolute; right:22px;_right:32px; top:0px;_top:6px;}
.page a.bt{ background:url(/Administration/Content/Images/bg.jpg) repeat-x; color:#000;}
.page a{ display:inline;  background:#FFF; width:20px; padding:1px 7px; border:1px solid #e9e9e9; margin-right:5px;}
.page .summary{ display:inline; padding:1px 4px 0 7px; margin-right:2px;}
.page input{ cursor:pointer; height:15px; padding:0; line-height:15px; font-size:11px; -webkit-text-size-adjust: none; margin-right:4px; margin-bottom:3px; text-align:center;}
.page a.hot,.page a:hover{ background:#5b83b4; color:#FFF;}
*{ margin:0;padding:0;}
html { overflow-y: scroll; }
* html body{ overflow:visible;}
body{ font:12px/22px 'Microsoft Yahei',Verdana,Arial,sans-serif,"Times New Roman"; word-wrap:break-word; }
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,tr{ margin:0; padding:0;}
input,select{ font-size:12px; vertical-align:middle;}
body div{ text-align:left;}
table{ border:0px; border-collapse:collapse; border-spacing:0px;}
th td{padding:0px;}
textarea,input{ word-wrap:break-word; word-break:break-all; padding:0px;}
li{ list-style-type:none;}
img{ border:0 none;}
a:hover{ color:#9f0017;}
a:link, a:visited{ text-decoration:none; color:#000;}
a { outline:none;color:#000;}

　　　　效果图：

                 

　　　　 总结：这种方式相对来说并不值得推荐，只是对原有记录的整理。下一篇整理EasyUi的分页，谢谢大家阅读！