using System; using System.Collections.Generic; using System.Linq; using System.Security.Cryptography.X509Certificates; using System.Web; namespace MvcAppPager.Models { public interface IPageOfList { long CurrentStart { get; } int PageIndex { get; set; } int PageSize { get; set; } int PageTotal { get; } long RecordTotal { get; set; } } public interface IPageOfList<T> : IPageOfList, IList<T> { } public class PageOfList<T>:List<T>,IList<T>,IPageOfList,IPageOfList<T> { public PageOfList(IEnumerable<T> items, int pageIndex, int pageSize, long recordTotal) { if (items!=null) AddRange(items); PageIndex = pageIndex; PageSize = pageSize; RecordTotal = recordTotal; } public PageOfList(int pageSize) { if (pageSize <= 0) { throw new ArgumentException("页面数据量必须大于0", "页面数据量"); } } public int PageIndex { get; set; } public int PageSize { get; set; } public int PageTotal { get { //RecordTotal / PageSize 获取能够被布满的页面数,(RecordTotal % PageSize > 0 ? 1 : 0)判断是否有未布满的页面。 return (int)RecordTotal / PageSize + (RecordTotal % PageSize > 0 ? 1 : 0); } } public long RecordTotal { get; set; } /// <summary> /// 当前页面的记录开始位置 /// </summary> public long CurrentStart { get { return PageIndex * PageSize + 1; } } /// <summary> /// 当前页面的结束位置 /// </summary> public long CurrentEnd { get { return (PageIndex + 1) * PageSize > RecordTotal ? RecordTotal : (PageIndex + 1) * PageSize; } } } }
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace MvcAppPager.Models { public class Order { public int ID { get; set; } public string OrderNo { get; set; } public decimal WayFee { get; set; } public string EMS { get; set; } } }
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using MvcAppPager.Models; namespace MvcAppPager.Controllers { public class HomeController : Controller { List<Order> list=new List<Order> { new Order{ID=1,OrderNo="2016050501",WayFee = 20,EMS = "C01111"}, new Order{ID=2,OrderNo="2016050502",WayFee = 20,EMS = "C01112"}, new Order{ID=3,OrderNo="2016050503",WayFee = 20,EMS = "C01113"}, new Order{ID=4,OrderNo="2016050504",WayFee = 20,EMS = "C01114"}, new Order{ID=5,OrderNo="2016050505",WayFee = 20,EMS = "C01115"}, new Order{ID=6,OrderNo="2016050506",WayFee = 20,EMS = "C01116"}, }; private const int PageSize = 2; private int counts; // // GET: /Home/ public ActionResult Index(int pageIndex=0) { counts = list.Count; list = list.Skip(PageSize * pageIndex).Take(PageSize).ToList(); PageOfList<Order> _ordersList=new PageOfList<Order>(list,pageIndex,PageSize,counts); return View(_ordersList); } } }
@model MvcAppPager.Models.IPageOfList @Styles.Render("~/Content/page.css") <div class="fenye"><span>共 @Model.RecordTotal 条 记录,每页 @Model.PageSize 条 </span> @{ System.Web.Routing.RouteValueDictionary route = new System.Web.Routing.RouteValueDictionary(); foreach (var key in Html.ViewContext.RouteData.Values.Keys) { route[key] = Html.ViewContext.RouteData.Values[key]; } foreach (string key in Html.ViewContext.RequestContext.HttpContext.Request.QueryString) { route[key] = Html.ViewContext.RequestContext.HttpContext.Request.QueryString[key]; } if (Model.PageIndex <= 0) { <a class="backpage" href="javascript:void(0);">上一页</a> } else { route["pageIndex"] = Model.PageIndex - 1; Html.ActionLink("上一页", route["action"].ToString(), route).ToHtmlString(); } if (Model.PageIndex > 3) { route["pageIndex"] = 0; Html.ActionLink("<b>1</b>", route["action"].ToString(), route).ToHtmlString().Replace("<", "<").Replace(">", ">"); if (Model.PageIndex >= 5) { <a href=‘#‘>..</a>; } } for (int i = Model.PageIndex - 2; i <= Model.PageIndex; i++) { if (i < 1) {continue;} route["pageIndex"] = i - 1; @Html.ActionLink(i.ToString(), route["action"].ToString(), route["controller"]); } <a class=‘active‘ href=‘#‘><b> @(Model.PageIndex+1) </b></a> for (var i = Model.PageIndex + 2; i <= Model.PageIndex + 4; i++) { if (i > Model.PageTotal) {continue;} else{ route["pageIndex"] = i - 1; @Html.ActionLink(i.ToString(), route["action"].ToString(), route); } } if (Model.PageIndex < Model.PageTotal - 4) { if (Model.PageIndex <= Model.PageTotal - 6) { <a href=‘#‘>..</a> } route["pageIndex"] = Model.PageTotal - 1; @Html.ActionLink(Model.PageTotal.ToString(), route["action"].ToString(), route).ToHtmlString(); } if (Model.PageIndex < Model.PageTotal - 1) { route["pageIndex"] = Model.PageIndex + 1; Html.ActionLink("下一页", route["action"].ToString(), route).ToHtmlString(); } else { <a class="nextpage" href="javascript:void(0);">下一页</a> } } </div>
@model MvcAppPager.Models.PageOfList<MvcAppPager.Models.Order>
@{
Layout = null;
ViewBag.Title = "Index";
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
@Styles.Render("~/Content/page.css")
</head>
<body>
<div id="body" style="width: 400px;float: left">
@using (Html.BeginForm("Index","Home",FormMethod.Get))
{
<table>
<tr>
<th>ID</th>
<th>订单号</th>
<th>运单号</th>
<th>运费</th>
</tr>
@if (Model != null && Model.Count > 0)
{
foreach (var item in Model.ToList())
{
<tr>
<td>@item.ID</td>
<td>@item.OrderNo</td>
<td>@item.EMS</td>
<td>@item.WayFee</td>
</tr>
}
}
</table>
Html.RenderPartial("pager", Model);
}
</div>
</body>
</html>
.fenye { float: right; } .fenye a,.fenye span,.fenye select { display: block; float: left; margin: 0 2px; } .fenye a { background: #fff; border: 1px solid #d6d6d6; color: #6f6f6f; height: 22px; line-height: 22px; margin: 0 2px; padding: 0 0 0 8px; position: relative; } .fenye a.nextpage:hover { background: #fff; border: 1px solid #ba191b; color: #000; } .fenye a.nextpage { height: 22px; margin: 0 0 0 2px; padding: 0px 5px; } .fenye a.backpage { background: #fff; border: 1px solid #d6d6d6; height: 22px; margin: 0 2px 0 0; padding: 0px 5px; } .fenye a.backpage:hover { background: url("images/pagebut.gif") no-repeat scroll left top rgba(0, 0, 0, 0); color: #000; } .fenye a:hover,.fenye a.active { background: #c32325; border: 1px solid #ba191b; color: #ffffff; text-decoration: none; } .fenye a.shenlue { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); margin: 0 5px; padding: 0; border: none; } .fenye a.shenlue:hover { color: #333333; } .fenye a b { display: block; font-size: 12px; font-weight: normal; height: 22px; line-height: 22px; margin-right: 0; padding: 0 8px 0 0; position: relative; }