代码改变世界

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

2014-09-12 14:28  看看能坚持多久！  阅读(609)  评论(0)  编辑  收藏  举报

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

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

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

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

 

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

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

                
 1     public class Page<T>
 2     {
 3         /// <summary>
 4         /// 当前页码
 5         /// </summary>
 6         public long CurrentPage 
 7         { 
 8             get; 
 9             set; 
10         }
11 
12         /// <summary>
13         /// 总页码
14         /// </summary>
15         public long TotalPages 
16         { 
17             get; 
18             set; 
19         }
20 
21         /// <summary>
22         /// 总记录数
23         /// </summary>
24         public long TotalItems 
25         { 
26             get; 
27             set; 
28         }
29 
30         /// <summary>
31         /// 每页显示记录数
32         /// </summary>
33         public long ItemsPerPage 
34         { 
35             get; 
36             set; 
37         }
38 
39         /// <summary>
40         /// 记录集合
41         /// </summary>
42         public List<T> Items 
43         { 
44             get; 
45             set; 
46         }
47 
48         /// <summary>
49         /// 任何自定义值
50         /// </summary>
51         public object Context 
52         { 
53             get; 
54             set; 
55         }
56     }
View Code

 　　　　　  1.首先获取数据

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

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

　　　　　　　　　　 
 1             StringBuilder html = new StringBuilder();
 2             html.Append(string.Format("<div class=\"summary\">当前{2}/{1}页 共{0}条记录</div>", pf.TotalItems, pf.TotalPages, pf.CurrentPage));
 3             html.Append(" ");
 4             html.AppendFormat("每页:<input type=\"text\" value=\"{0}\" id=\"pageSize\" name=\"pageSize\" size=\"1\"/>", pf.ItemsPerPage); 
 5             html.Append("<a href=\"#\">上一页</a>"); 
 6             int startnum = (int)pf.CurrentPage - 3;
 7             if ((pf.TotalPages < 3) || ((pf.CurrentPage - 3) < 1))
 8             {
 9                 startnum = 1;
10             }
11             if (pf.CurrentPage + 3 >= pf.TotalPages)
12             {
13                 startnum = (int)(pf.TotalPages) - 3;
14             } 
15             for (int i = startnum; i <= startnum + 3; i++)
16             { 
17                 if (pf.CurrentPage != i)
18                 {
19                     html.AppendFormat("<a href=\"#\" page=\"{0}\" class=\"bt\">{0}</a>", i);
20                 }
21                 else
22                 {
23                     html.AppendFormat("<a href=\"\" class=\"hot\">{0}</a>", i);
24                 } 
25             }
26             html.Append("<a href=\"#\">下一页</a>");
27             html.Append("<a href=\"#\">末页</a>");
28             html.AppendFormat("跳转到:<input type=\"text\" value=\"{0}\" id=\"pageNumber\" totalPages=\"{1}\" name=\"pageNumber\" size=\"1\"/>页", pf.CurrentPage, pf.TotalPages);
29             //前台控件
30             Literal1.Text = html.ToString();
View Code

 　　　　　 3.前台html

　　　　　　　　　　 
1     　       <div class="page">
2               　　<asp:Literal Text="" runat="server"  ID="Literal1"/>
3              </div>
View Code

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

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

　　　　效果图：

                 

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