首页添加一个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 }
最终的显示图如下: