MVC 分页 JQuery Pager
导入的包<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; } }}
页:
[1]