简单的数据分页

1.定义实体类

namespace AjaxPaging.Models
{
    public class Person
    {
        public int PersonId { get; set; }

        public string Forename { get; set; }

        public string Surname { get; set; }

        public string Country { get; set; }
    }
}

2.有了实体类后，接着需要定义分页类，需要包含的属性有总页数，当前页数以及当前页显示的数据，当然完全可以继承此类，再添加其他的你所需要的属性。

namespace AjaxPaging.Helpers
{
    public class PagedData<T> where T : class
    {
        public IEnumerable<T> Data { get; set; }

        public int NumberOfPages { get; set; }

        public int CurrentPage { get; set; }
    }
}

3.有了实体类后，接着定义数据访问接口，用于获取数据。

namespace AjaxPaging.Data
{
    interface IPersonDataContext
    {
        IEnumerable<Person> GetPerson();
    }
}

namespace AjaxPaging.Data
{
    public class PersonDataContext : IPersonDataContext
    {
        public IEnumerable<Person> GetPerson()
        {
            var person = new List<Person>();

            person.Add(new Person() { PersonId = 1, Forename = "Paul", Surname = "Huang", Country = "ShenZhen"});

            person.Add(new Person() { PersonId = 2, Forename = "James", Surname = "Wong", Country = "ShenZhen" });

            person.Add(new Person() { PersonId = 3, Forename = "Tommy", Surname = "Li", Country = "Beijing" });

            person.Add(new Person() { PersonId = 4, Forename = "Julia", Surname = "Huang", Country = "ShenZhen" });

            person.Add(new Person() { PersonId = 5, Forename = "Hebe", Surname = "Huang", Country = "ShenZhen" });

            person.Add(new Person() { PersonId = 6, Forename = "Sky", Surname = "Huang", Country = "GuangZhou" });

            person.Add(new Person() { PersonId = 7, Forename = "Blue", Surname = "Huang", Country = "ShenZhen" });

            person.Add(new Person() { PersonId = 8, Forename = "Daisy", Surname = "Huang", Country = "Beijing" });

            person.Add(new Person() { PersonId = 9, Forename = "Hoily", Surname = "Huang", Country = "GuangZhou" });

            person.Add(new Person() { PersonId = 10, Forename = "Ricky", Surname = "Huang", Country = "ShenZhen" });

            person.Add(new Person() { PersonId = 11, Forename = "Bill", Surname = "Huang", Country = "Beijing" });

            person.Add(new Person() { PersonId = 12, Forename = "Jason", Surname = "Huang", Country = "ShenZhen" });

            return person;
        }
    }
}

4.定义Controller,定义两个Action,一个用于返回默认的主页面，另一个用于查找特定页数的数据并返回View。

namespace AjaxPaging.Controllers
{
    public class HomeController : Controller
    {
        #region Field

        private const int PageSize = 5;

        private readonly IPersonDataContext _dataContext = new PersonDataContext();

        #endregion

        #region Action

        public ActionResult Index()
        {
            var people = new PagedData<Person>();

            List<Person> persons = _dataContext.GetPerson().ToList();

            people.Data = persons.OrderBy(p => p.Surname).Take(PageSize).ToList();

            people.NumberOfPages = Convert.ToInt32(Math.Ceiling((double)persons.Count() / PageSize));

            people.CurrentPage = 1;

            return View(people);
        }

        /// <summary>
        /// 用于返回包含特定页码数据的部分视图
        /// </summary>
        /// <param name="page"></param>
        /// <returns></returns>
        public ActionResult PersonList(int page)
        {
            var people = new PagedData<Person>();

            List<Person> persons = _dataContext.GetPerson().ToList();

            people.Data = persons.OrderBy(p => p.Surname).Skip(PageSize * (page - 1)).Take(PageSize).ToList();

            people.NumberOfPages = Convert.ToInt32(Math.Ceiling((double)persons.Count() / PageSize));

            people.CurrentPage = page;

            return PartialView(people);
        }

        #endregion
    }
}

5.定义显示数据的部分视图，以便通过Ajax请求数据并返回特定的部分视图

@model AjaxPaging.Helpers.PagedData<AjaxPaging.Models.Person>

<table>
    <thead>
        <tr>
            <th>
                Forename
            </th>
            <th>
                Surname
            </th>
            <th>
                Location
            </th>
        </tr>
    </thead>
    <tbody>
        @foreach (var person in Model.Data)
        {
            <tr>
                <td>
                    @person.Forename
                </td>
                <td>
                    @person.Surname
                </td>
                <td>
                    @person.Country
                </td>
            </tr>
        }
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">
                @for (int i = 1; i <= Model.NumberOfPages; i++)
                {
                    if (i == Model.CurrentPage)
                    {
                        @i
                    }
                    else
                    {
                        <a class="page-number" href="javascript:void();">@i</a>
                    }
                }
            </td>
        </tr>
    </tfoot>
</table>

6.定义Index页面，当单击page-number时通过Ajax请求数据并刷新页面

@model AjaxPaging.Helpers.PagedData<AjaxPaging.Models.Person>

<script type="text/javascript">
    $().ready(function () {
        $(".page-number").live("click", function () {

            var page = parseInt($(this).html());

            $.ajax({
                url: '@Url.Action("PersonList")',
                data: { "page": page },
                success: function (data) {
                    $("#person-list").html(data);
                }
            });
        });
    });
</script>

@{
    ViewBag.Title = "Home Page";
}

<div id="person-list">
    @Html.Partial("PersonList")
</div>

最后的显示效果如下

 DEMO下载