mvc 分頁PagedList簡單使用

1.nuget下載PagedList包

 

2.PageListHelper類：

using PagedList;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace ClothMvcApp.Helper
{
    public class PageListHelper<T>
    {
        public IPagedList<T> PageList { get; set; }

        public string Controller { get; set; }

        public string Action { get; set; }

        public string Key { get; set; }
    }
}

3.創建一個部分頁_PagedListPartial.cshtml

<div class="page-box">
    @{

    int pageIndex = 1;
    int pageSize = 1;

    if (Model.PageList != null)
    {
        pageIndex = Model.PageList.PageNumber;

        pageSize = Model.PageList.PageSize;

        <span>共<span style="color:orange;font-weight:bold;">@Model.PageList.TotalItemCount</span>條 &nbsp;&nbsp; 共<span style="color: orange; font-weight: bold;">@Model.PageList.PageCount</span>頁</span>

             <a href="@Url.Action(Model.Action, Model.Controller, new { pageIndex = 1,pageSize=Model.PageList.PageSize,key=Model.Key })">首頁</a>

            if (Model.PageList.HasPreviousPage)
            {
                <a href="@Url.Action(Model.Action, Model.Controller, new { pageIndex = (Model.PageList.PageNumber - 1), pageSize = Model.PageList.PageSize, key = Model.Key })">上一頁</a>
            }
            
             <select onchange="changePageSize(this)" style="width:70px;">
                @{
                    for (int i = 1; i <= 10; i++)
                    {
                        <option value="@(i*5)" @(Model.PageList.PageSize == i*5 ? "selected" : "")>@(i*5)</option>
                    }
                }
            </select>
        

            if (Model.PageList.HasNextPage)
            {
                <a href="@Url.Action(Model.Action, Model.Controller, new { pageIndex = (Model.PageList.PageNumber + 1), pageSize = Model.PageList.PageSize, key = Model.Key })">下一頁</a>
            }


            <a href="@Url.Action(Model.Action, Model.Controller, new { pageIndex = Model.PageList.PageCount, pageSize = Model.PageList.PageSize, key = Model.Key })">末頁</a>
        }
    }
  
</div>

<script type="text/javascript">

    function changePageSize(obj)
    {
        var pageSize = obj.value;
        window.location = "/Admin/@Model.Controller/@Model.Action?pageIndex=@pageIndex&pageSize="+pageSize+"&key=@Model.Key"

    }

    function search() {
        var key = document.getElementById("key").value;
        window.location = "/Admin/@Model.Controller/@Model.Action?pageIndex=1&pageSize=@pageSize&key=" + key;

    }

</script>

4.Index頁面調用：

@using ClothMvcApp.EF;
@using ClothMvcApp.Helper;
@{
    Layout = null;
    var list = ViewBag.data as PagedList.IPagedList<ClothMvcApp.EF.Product>;
}

 @Html.Partial("_PagedListPartial", new PageListHelper<ClothMvcApp.EF.Product>() { Controller = "Cloth", Action = "Index", Key = ViewBag.key, PageList = list })