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 [email protected];
    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
                          [email protected];
                          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;
        }
    }
}