public ActionResult Index(int? pageIndex) { List<string> data = new List<string>(); for (int i = 0; i < 103; i++) { data.Add((i * 2).ToString()); } PagedList<string> pagedList = new PagedList<string>(data.AsQueryable(), pageIndex, 5); return View("Index", "_Layout", pagedList); } public PartialViewResult IndexPartial(int? pageIndex) { List<string> data = new List<string>(); for (int i = 0; i < 103; i++) { data.Add((i * 2).ToString()); } PagedList<string> pagedList = new PagedList<string>(data.AsQueryable(), pageIndex, 5); return PartialView("Index", pagedList); }
Index
@model PagedList<string> @{ Layout = null; } @RenderPage("../Shared/_pagerView.cshtml") @foreach (var item in Model) { @item<br /> <br /> } @RenderPage("../Shared/_pagerView.cshtml")
pagerView
<style type="text/css"> /*= 分页页号样式 =*/ .pagination { margin-bottom: 10px; line-height: 23px; } .pagination-inner { float: right; } .pagination a, .pagination span { float: left; display: inline; margin-left: 3px; padding: 0 7px; border: 1px solid #a2d0e5; background-color: #fff; white-space: nowrap; } .pagination a:link, .pagination a:visited { color: #017ca9; text-decoration: none; } .pagination a:hover, .pagination a:active { border-color: #1db535; text-decoration: none; } .pagination .current, .pagination a.current:link, .pagination a.current:visited { color: #fff; border-color: #1db535; background: #57d26a; font-weight: bold; } </style> <div class="clearfix pagination"> <div class="pagination-inner"> @if (Model.Start > 1) { <a href="javascript:void(0);" pageindex="1">1...</a> } @for (int i = Model.Start; i <= Model.End; i++) { <a href="javascript:void(0);" pageindex="@i">@i</a> } @if (Model.End < Model.TotalPages && Model.PageIndex - Model.Start < 3) { string totalPages = (Model.TotalPages).ToString(); <a href="javascript:void(0);" pageindex="@totalPages">...@(totalPages)</a> } </div> </div> <script type="text/javascript"> $(document).ready( $("a").click(function () { var p = $(this).attr("pageindex"); $.post("Home/IndexPartial", { pageIndex: p }, function (data) { $("#main").html(data); }); }) ) </script>
Controller