利用mvc3实现分页效果。效果图如下：
直接拷代码：
首页添加一个Helper的类（命名空间为System.Web.Mvc;）。
1 public static HtmlString ShowPageNavigate(this HtmlHelper htmlHelper, int currentPage, int pageSize, int totalCount) 2 { 3 var redirectTo = htmlHelper.ViewContext.RequestContext.HttpContext.Request.Url.AbsolutePath; 4 pageSize = pageSize == 0 ? 3 : pageSize; 5 var totalPages = Math.Max((totalCount + pageSize - 1) / pageSize, 1); //总页数 6 var output = new StringBuilder(); 7 if (totalPages > 1) 8 { 9 output.AppendFormat("<a class='pageLink' href='{0}?pageIndex=1&pageSize={1}'>首页</a> ", redirectTo, pageSize); 10 if (currentPage > 1) 11 {//处理上一页的连接 12 output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>上一页</a> ", redirectTo, currentPage - 1, pageSize); 13 } 14 15 output.Append(" "); 16 int currint = 5; 17 for (int i = 0; i <= 10; i++) 18 {//一共最多显示10个页码，前面5个，后面5个 19 if ((currentPage + i - currint) >= 1 && (currentPage + i - currint) <= totalPages) 20 { 21 if (currint == i) 22 {//当前页处理 23 output.AppendFormat("<a class='cpb' href='{0}?pageIndex={1}&pageSize={2}'>{3}</a> ", redirectTo, currentPage, pageSize, currentPage); 24 } 25 else 26 {//一般页处理 27 output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>{3}</a> ", redirectTo, currentPage + i - currint, pageSize, currentPage + i - currint); 28 } 29 } 30 output.Append(" "); 31 } 32 if (currentPage < totalPages) 33 {//处理下一页的链接 34 output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>下一页</a> ", redirectTo, currentPage + 1, pageSize); 35 } 36 37 output.Append(" "); 38 if (currentPage != totalPages) 39 { 40 output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>末页</a> ", redirectTo, totalPages, pageSize); 41 } 42 output.Append(" "); 43 } 44 output.AppendFormat("<label>第{0}页 / 共{1}页</label>", currentPage, totalPages);//这个统计加不加都行 45 46 return new HtmlString(output.ToString()); 47 }
其次再添加两个公共类：PagerInfo与PageQuery。PagerInfo类用于放置分页相关内容。PageQuery则用于放置PagerInfo及要显示的数据信息。
1 public class PagerInfo 2 { 3 public int RecordCount { get; set; } 4 5 public int CurrentPageIndex { get; set; } 6 7 public int PageSize { get; set; } 8 }
1 public class PagerQuery<TPager, TEntityList> 2 { 3 public PagerQuery(TPager pager, TEntityList entityList) 4 { 5 this.Pager = pager; 6 this.EntityList = entityList; 7 } 8 public TPager Pager { get; set; } 9 public TEntityList EntityList { get; set; } 10 }
然后在Controller里面添加Action
1 public ActionResult Index(int? pageSize,int? pageIndex) 2 { 3 int pageIndex1 = pageIndex ?? 1; 4 int pageSize1 = pageSize ?? 5; 5 int count=0; 6 //从数据库在取得数据，并返回总记录数 7 var temp = newsSer.LoadPageEntities(c => true, c => c.id, false, pageSize1, pageIndex1, out count); 8 PagerInfo pager = new PagerInfo(); 9 pager.CurrentPageIndex = pageIndex1; 10 pager.PageSize = pageSize1; 11 pager.RecordCount = count; 12 PagerQuery<PagerInfo,IQueryable<news>> query = new PagerQuery<PagerInfo,IQueryable<news>>(pager,temp); 13 return View(query); 14 }
最要在View里的部分代码如下：
@model PagerQuery<PagerInfo, IQueryable<_6_16DFAZ_Models.news>>
最后在body里面要显示的数据如下：
1 <tbody> 2 @foreach (var item in Model.EntityList) 3 { 4 <tr> 5 <td class="checkBox"> 6 <input name="ids[]" type="checkbox" value="" /> 7 </td> 8 <td> 9 @item.author 10 </td> 11 <td> 12 @item.title 13 </td> 14 <td> 15 @item.ctime 16 </td> 17 <td> 18 @Html.ActionLink("编辑", "Edit", new { id = item.id }) | 19 @Html.ActionLink("删除", "Delete", new { id = item.id }) 20 </td> 21 </tr> 22 } 23 @*分页*@ 24 <tr class=""> 25 <td colspan="5" align="center" class="paginator"> 26 <span> 27 @Html.ShowPageNavigate(Model.Pager.CurrentPageIndex, Model.Pager.PageSize, Model.Pager.RecordCount) 28 </span> 29 </td> 30 </tr> 31 </tbody>
ok.分页效果已经实现。为了美观，再添加一些样式。
1 .paginator 2 { 3 font: 12px Arial, Helvetica, sans-serif; 4 padding: 10px 20px 10px 0; 5 margin: 0px auto; 6 } 7 8 .paginator a 9 { 10 border: solid 1px #ccc; 11 color: #0063dc; 12 cursor: pointer; 13 text-decoration: none; 14 } 15 16 .paginator a:visited 17 { 18 padding: 1px 6px; 19 border: solid 1px #ddd; 20 background: #fff; 21 text-decoration: none; 22 } 23 24 .paginator .cpb 25 { 26 border: 1px solid #F50; 27 font-weight: 700; 28 color: #F50; 29 background-color: #ffeee5; 30 } 31 32 .paginator a:hover 33 { 34 border: solid 1px #F50; 35 color: #f60; 36 text-decoration: none; 37 } 38 39 .paginator a, .paginator a:visited, .paginator .cpb, .paginator a:hover 40 { 41 float: left; 42 height: 16px; 43 line-height: 16px; 44 min-width: 10px; 45 _width: 10px; 46 margin-right: 5px; 47 text-align: center; 48 white-space: nowrap; 49 font-size: 12px; 50 font-family: Arial,SimSun; 51 padding: 0 3px; 52 } 53 54 .paginator label 55 { 56 display:block; 57 float:left; 58 }
最终的显示图如下：
大功告成！
