分頁效果對程序員來所是常見的，但是在這里我介紹的是一個不一樣的分頁效果，也許你們也長用，偏移量的分頁效果，以前學的不精所以研究一好久覺得還是拿出來分享一下吧，同時也讓我記住。好了光說大家可定沒興趣，來個效果圖吧：
這個效果想必大家不陌生吧。
先介紹一下偏移量的思路吧，也方便我以后好記起，呵呵私心哈，但誰都會有忘性滴。。。
思路第一步：獲取總頁數，每頁顯示多少個，當前頁碼，和樣式。在此在這里css樣式也作為參數傳遞了。
思路第二步：上一頁，下一頁和記錄分頁位置(分頁偏移量)
思路第三步：排除過其他可能性的判斷后就是分頁的過程考慮了，首先我以10為界限吧，如果當前頁<10或者不是最后10頁，還有就是正常分頁的效果了。我個人就分這三步吧，下面就開始我們的工程吧。
View Code
1 /*------------------------------------分頁開始---------------------------------------------*/ 2 /**分頁樣式1*/ 3 .pages2 { font: 12px Arial, Helvetica, sans-serif;padding:10px 20px 10px 0; margin: 0px;} 4 .pages2 a {padding: 1px 6px; border: solid 1px #ddd; background: #fff; text-decoration: none;margin-right:2px} 5 .pages2 a:visited {padding: 1px 6px; border: solid 1px #ddd; background: #fff; text-decoration: none;} 6 .pages2 .cpb {padding: 1px 6px;font-weight: bold; font-size: 12px;border:none} 7 .pages2 a:hover {color: #fff; background: #ffa501;border-color:#ffa501;text-decoration: none;} 8 /**分頁樣式2*/ 9 10 .pages1 .cpb {font-size:12px;background:#1F3A87 none repeat scroll 0 0;border:1px solid #CCCCCC;color:#FFFFFF;font-weight:bold;margin:5px 4px 0 0;padding:4px 5px 0;} 11 .pages1 a {background:#FFFFFF none repeat scroll 0 0;border:1px solid #CCCCCC;color:#1F3A87;margin:5px 4px 0 0;padding:4px 5px 0;text-decoration:none;font-size:12px} 12 .pages1 a:hover{background:#1F3A87 none repeat scroll 0 0;border:1px solid #1F3A87;color:#FFFFFF;font-size:14px} 13 14 /**分頁樣式3*/ 15 .pages { color: #999; } 16 .pages a, .pages .cpb { text-decoration:none;float: left; padding: 0px 5px; border: 1px solid #ddd;background: #ffff;margin:0 2px; font-size:12px; color:#000;} 17 .pages a:hover { background-color: #E61636; color:#fff;border:1px solid #E61636; text-decoration:none;} 18 .pages .cpb { font-weight: bold; color: #fff; background: #E61636; border:1px solid #E61636;} 19 /*------------------------------------分頁結束---------------------------------------------*/
這個是css分頁的樣式。也是借用別人寫的，稍微改一下而已。三種樣式隨意變換。
protected StringBuilder GetPagerHtml(int total,int size,int page,string css)
{
}利用這個方法來傳值/// <summary>
/// 分頁效果
/// </summary>
/// <param name="total">總記錄數</param>
/// <param name="size">每頁顯示的條數</param>
/// <param name="page">當前的頁碼</param>
/// <param name="css">分頁效果</param>
/// <returns></returns>
View Code
1 StringBuilder sb = new StringBuilder(); 2 sb.Append(@"<div id=""pager"" class="""+css+ @""">"); 3 //總頁數 4 int allpage = 0; 5 if (size != 0) 6 { 7 //整除 8 allpage = total / size; 9 //非整除 10 allpage = ((total % size) != 0 ? allpage+1 : allpage); 11 //和0比較 12 allpage = total == 0 ? 1 : allpage; 13 } 14 //判斷頁碼和總頁數 15 if (page > allpage) 16 { 17 page = allpage; 18 } 19 if (page < 1) 20 { 21 page = 1; 22 } 23 24 //上一頁和下一頁 25 int pre = page - 1; 26 int next = page + 1; 27 28 //記錄分頁位置(分頁偏移量) 29 int startcount = 0; 30 if (startcount <= 0) 31 { 32 startcount = 1; 33 } 34 #region 判斷分頁 35 /*---------------設置上一頁--------------------*/ 36 if (page > 1) 37 { 38 sb.Append(@"<a disabled=""disabled"" href=""javascript:page(" + pre + @")"" style=""margin-right:5px;"">上一頁</a>"); 39 } 40 else 41 { 42 sb.Append(@"<span class=""cpb"" style=""margin-right:5px;"">上一頁</span>"); 43 } 44 #endregion
完成第二步的操作。
下面開始第三步吧，寫的有點亂了，，
View Code
1 #region 分頁開始 2 if (allpage < 50) 3 { 4 for (int i = 1; i <= allpage; i++) 5 { 6 if (page == i) 7 { 8 sb.Append(@"<span class=""cpb"" style=""margin-right:5px;"">" + i + @"</span>"); 9 } 10 else 11 { 12 sb.Append(@"<a disabled=""disabled"" href=""javascript:page(" + i + @")"" style=""margin-right:5px;"">" + i + @"</a>"); 13 } 14 } 15 } 16 else 17 { 18 startcount = (page+10) > allpage? allpage-5 : page-10; 19 20 #region 當前頁小於10 21 if (page < 10) 22 { 23 for (int i = 1; i <= 10; i++) 24 { 25 if (page == i) 26 { 27 sb.Append(@"<span class=""cpb"" style=""margin-right:5px;"">" + i + @"</span>"); 28 } 29 else 30 { 31 sb.Append(@"<a disabled=""disabled"" href=""javascript:page(" + i + @")"" style=""margin-right:5px;"">" + i + @"</a>"); 32 } 33 } 34 } 35 else { 36 //如果不是最后10頁 37 if (page < allpage - 10) 38 { 39 for (int i = startcount; i < startcount + 10; i++) 40 { 41 if (page == i) 42 { 43 sb.Append(@"<span class='cpb' style='margin-right:5px;'>" + i + @"</span>"); 44 } 45 else 46 { 47 sb.Append(@"<a href=""javascript:page(" + i + @")"" style='margin-right:5px;'>" + i + @"</a>"); 48 } 49 } 50 } 51 else 52 { 53 for (int i = allpage - 10; i <= allpage; i++) 54 { 55 if (page == i) 56 { 57 sb.Append(@"<span class=""cpb"" style=""margin-right:5px;"">" + i + @"</span>"); 58 } 59 else 60 { 61 sb.Append(@"<a disabled=""disabled"" href=""javascript:page(" + i + @")"" style=""margin-right:5px;"">" + i + @"</a>"); 62 } 63 } 64 } 65 66 } 67 68 #endregion 69 } 70 71 #endregion
嗯第三步完成后就是結尾的部分了
View Code
1 #region 設置下一頁 2 /*---------------設置下一頁--------------------*/ 3 if (page < allpage) 4 { 5 sb.Append(@"<a disabled=""disabled"" href=""javascript:page(" + next + @")"" style=""margin-right:5px;"">下一頁</a>"); 6 } 7 else 8 { 9 sb.Append(@"<span class=""cpb"" style=""margin-right:5px;"">下一頁</span>"); 10 } 11 #endregion
好了暫時完成，等以后繼續修改增加。這個只是有助本人不忘，沒別的想法當然如果路過的園友有想法也可以給個意見或建議，或者互相關注大家互相學習共同進步哈,應大家的要求就把源碼也整一下吧，其實這就是源碼只不過是分步完成了而已，希望能對大家有點幫助。
View Code
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using System.Web.UI; 6 using System.Web.UI.WebControls; 7 using System.Text; 8 namespace StudyPager 9 { 10 public partial class index : System.Web.UI.Page 11 { 12 protected void Page_Load(object sender, EventArgs e) 13 { 14 if (Request.Form["subflag"] != null && Request.Form["subflag"] != "" && Request.Form["subflag"] == "1") 15 { 16 int p = Convert.ToInt32(Request.Form["p"]); 17 StringBuilder sb = new StringBuilder(); 18 sb.Append(@"<form id=""form1"" action=""index.aspx"" method=""post""> 19 <input type=""hidden"" value=""1"" name=""p""/> 20 <input type=""hidden"" value=""1"" name=""subflag""/> 21 </form>"); 22 sb.Append(this.GetPagerHtml(121, 5, p, "pages1")); 23 this.WebPage.InnerHtml = sb.ToString(); 24 } 25 else 26 { 27 StringBuilder sb = new StringBuilder(); 28 sb.Append(@"<form id=""form1"" action=""index.aspx"" method=""post""> 29 <input type=""hidden"" value=""1"" name=""p""/> 30 <input type=""hidden"" value=""1"" name=""subflag""/> 31 </form>"); 32 sb.Append(this.GetPagerHtml(121, 5, 1, "pages1")); 33 this.WebPage.InnerHtml = sb.ToString(); 34 } 35 } 36 /// <summary> 37 /// 分頁效果 38 /// </summary> 39 /// <param name="total">總記錄數</param> 40 /// <param name="size">每頁顯示的條數</param> 41 /// <param name="page">當前的頁碼</param> 42 /// <param name="css">分頁效果</param> 43 /// <returns></returns> 44 protected StringBuilder GetPagerHtml(int total,int size,int page,string css) 45 { 46 StringBuilder sb = new StringBuilder(); 47 sb.Append(@"<div id=""pager"" class="""+css+ @""">"); 48 //總頁數 49 int allpage = 0; 50 if (size != 0) 51 { 52 //整除 53 allpage = total / size; 54 //非整除 55 allpage = ((total % size) != 0 ? allpage+1 : allpage); 56 //和0比較 57 allpage = total == 0 ? 1 : allpage; 58 } 59 //判斷頁碼和總頁數 60 if (page > allpage) 61 { 62 page = allpage; 63 } 64 if (page < 1) 65 { 66 page = 1; 67 } 68 69 //上一頁和下一頁 70 int pre = page - 1; 71 int next = page + 1; 72 73 //記錄分頁位置(分頁偏移量) 74 int startcount = 0; 75 if (startcount <= 0) 76 { 77 startcount = 1; 78 } 79 #region 判斷分頁 80 /*---------------設置上一頁--------------------*/ 81 if (page > 1) 82 { 83 sb.Append(@"<a disabled=""disabled"" href=""javascript:page(" + pre + @")"" style=""margin-right:5px;"">上一頁</a>"); 84 } 85 else 86 { 87 sb.Append(@"<span class=""cpb"" style=""margin-right:5px;"">上一頁</span>"); 88 } 89 90 #region 分頁開始 91 if (allpage < 150) 92 { 93 for (int i = 1; i <= allpage; i++) 94 { 95 if (page == i) 96 { 97 sb.Append(@"<span class=""cpb"" style=""margin-right:5px;"">" + i + @"</span>"); 98 } 99 else 100 { 101 sb.Append(@"<a disabled=""disabled"" href=""javascript:page(" + i + @")"" style=""margin-right:5px;"">" + i + @"</a>"); 102 } 103 } 104 } 105 else 106 { 107 startcount = (page+10) > allpage? allpage-5 : page-10; 108 109 #region 當前頁小於10 110 if (page < 10) 111 { 112 for (int i = 1; i <= 10; i++) 113 { 114 if (page == i) 115 { 116 sb.Append(@"<span class=""cpb"" style=""margin-right:5px;"">" + i + @"</span>"); 117 } 118 else 119 { 120 sb.Append(@"<a disabled=""disabled"" href=""javascript:page(" + i + @")"" style=""margin-right:5px;"">" + i + @"</a>"); 121 } 122 } 123 } 124 else { 125 //如果不是最后10頁 126 if (page < allpage - 10) 127 { 128 for (int i = startcount; i < startcount + 10; i++) 129 { 130 if (page == i) 131 { 132 sb.Append(@"<span class='cpb' style='margin-right:5px;'>" + i + @"</span>"); 133 } 134 else 135 { 136 sb.Append(@"<a href=""javascript:page(" + i + @")"" style='margin-right:5px;'>" + i + @"</a>"); 137 } 138 } 139 } 140 else 141 { 142 for (int i = allpage - 10; i <= allpage; i++) 143 { 144 if (page == i) 145 { 146 sb.Append(@"<span class=""cpb"" style=""margin-right:5px;"">" + i + @"</span>"); 147 } 148 else 149 { 150 sb.Append(@"<a disabled=""disabled"" href=""javascript:page(" + i + @")"" style=""margin-right:5px;"">" + i + @"</a>"); 151 } 152 } 153 } 154 155 } 156 157 #endregion 158 } 159 160 #endregion 161 162 163 164 165 166 /*---------------設置下一頁--------------------*/ 167 if (page < allpage) 168 { 169 sb.Append(@"<a disabled=""disabled"" href=""javascript:page(" + next + @")"" style=""margin-right:5px;"">下一頁</a>"); 170 } 171 else 172 { 173 sb.Append(@"<span class=""cpb"" style=""margin-right:5px;"">下一頁</span>"); 174 } 175 #endregion 176 177 sb.Append(@"</div>"); 178 return sb; 179 } 180 } 181 }