导入的包
<script type="text/javascript" src="@Url.Content("~/Content/Admin/js/jquery/jquery.pager.js")"></script>
<link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/Admin/Pager.css")" />
Index.aspx
@{
ViewBag.Title = "Index";
}
@using com.fh.Models
@model DemoList
<div id="sourcelist">
@* @{
Html.RenderAction("PageSelected", new { cuurentPageIndex = 0 });
}*@
@Html.Partial("_TableList",Model)
</div>
<script type="text/javascript">
$(document).ready(function () {
PageClick(1); //$(".itemspager").pager({ pagenumber: currentPageNumber, pagecount: totalPageNumber, buttonClickCallback: PageClick });
});
</script>
_TableList.cshtml(PartialView)
@using com.fh.Models
@model DemoList
<table>
<thead>
<tr>
<td>
ID
</td>
<td>
Name
</td>
</tr>
</thead>
<tbody>
@foreach (var item in Model.DataSource)
{
<tr>
<td>@item.ID
</td>
<td>@item.Name
</td>
</tr>
}
</tbody>
</table>
<div class="clear">
</div>
@if (Model.TotalItems > 0)
{
if (Model.TotalItems <= 5)
{
<div class="pagination">
<div class="results">
Showing 1 to @Model.TotalItems of @Model.TotalItems (1 Pages)</div>
</div>
}
else
{
<div class="itemspager pagination">
</div>
}
}
<div class="clear">
</div>
<script type="text/javascript" language="javascript">
var currentPageNumber = 1;
var numPerPage =5;
var totalItems=@Model.TotalItems;
var totalPageNumber = Math.ceil(totalItems / numPerPage);
var url="@Url.Action("PageSelected","Demo")";
var PageClick = function (pageclicknumber) {
currentPageNumber=pageclicknumber;
$.ajax({
async: false,
type: "Post",
url:url,
data: ({ cuurentPageIndex: currentPageNumber }),//will be more parameters when you needed.
dataType: "html",
success: function (responseData) {
$("#sourcelist").html(responseData); //render table
totalitems=@Model.TotalItems;
totalPageNumber = Math.ceil(totalItems / numPerPage);
$(".itemspager").pager({ pagenumber:pageclicknumber, pagecount:totalPageNumber, buttonClickCallback: PageClick });
}
});
};
</script>
ViewModel
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace com.fh.Models { public class DemoList { public DemoList() { DataSource = new List<Demo>(); } public List<Demo> DataSource { get; set; } public int TotalItems { get; set; } public int CurrentPageIndex { get; set; } } public class Demo { public int ID { get; set; } public string Name { get; set; } } }
control
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using com.fh.Models; namespace com.fh.Controllers { public class DemoController : _Base { public readonly int numberPerPage = 5; public ActionResult Index() { DemoList m = new DemoList(); //m.DataSource = CreatePageListTestDate(); //return View(m); return View(m); } public ActionResult PageSelected(int cuurentPageIndex) { DemoList m = new DemoList(); m.CurrentPageIndex = cuurentPageIndex; m.DataSource = CreatePageListTestDate().Skip((cuurentPageIndex-1) * numberPerPage).Take(numberPerPage).ToList(); m.TotalItems = CreatePageListTestDate().Count; return PartialView("_TableList", m); } public List<Demo> CreatePageListTestDate() { List<Demo> r = new List<Demo>(); for (int i = 1; i < 100; i++) { r.Add(new Demo { ID = i, Name = "test name " + i, }); } return r; } } }