對於一個List分頁，這個就很簡單了只需要組裝資料結構，然後根據分頁引數改變資料顯示就OK了。

Pager工具

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace RTVSWeb.Utils
{
    /// <summary>
    /// List資料分頁物件
    /// </summary>
    public class Pager<T>
    {
        public int CurrentPage { set; get; }

        public int PageSize { set; get; }

        public int TotalPage { set; get; }

        public int TotalData { set; get; }

        private List<T> Results = new List<T>();

        public List<T> Data
        {
            set { value = Results; }
            get { return Results; }
        }
        /// <summary>
        /// 分頁原始資料
        /// </summary>
        /// <param name="page"></param>
        /// <param name="pageSize"></param>
        /// <param name="deviceInfos"></param>
        public void Paging(int page, int pageSize, List<T> deviceInfos)
        {
            this.PageSize = pageSize;
            this.CurrentPage = page;
            this.TotalData = deviceInfos.Count;
            if (deviceInfos.Count % PageSize == 0)
            {
                TotalPage = deviceInfos.Count / PageSize;
            }
            else
            {
                TotalPage = deviceInfos.Count / PageSize + 1;
            }

            if (CurrentPage > TotalPage)
            {
                CurrentPage = TotalPage;
            }

            if (deviceInfos.Count > 0)
            {
                int left = deviceInfos.Count - (CurrentPage - 1) * PageSize;
                Results = deviceInfos.GetRange((CurrentPage - 1) * PageSize, left > PageSize ? PageSize : left);
            }

        }

    }
}
 

Controller查詢使用

  // 上傳的裝置分頁列表: /<controller>/
        public Pager<DeviceInfo> DevicesToPage(int page,int pageSize)
        {
            Pager<DeviceInfo> pager = new Pager<DeviceInfo>();
            pager.Paging(page,pageSize, Program.task.ServerInfoGet().ListDeviceInfo);
            return pager;
        }
 

View顯示cshtml

@{
    Layout = null;
}
<center><input type="button" class="btn-primary" style="width:48px;height:24px;" value="重新整理" onclick="reload()"></center>
<!--這個地方展示資料-->
<table id="data-table" class="table"  style="width:100%;">
    <tr>
        <th >裝置IP</th>
        <th >裝置SIM</th>
        <th >裝置邏輯通道</th>
        <th >轉發客戶端列表</th>
    </tr>

</table>
<!--這個地方展示分頁-->
<div class="m-style M-box3"></div>

<link rel="stylesheet" type="text/css" href="/js/pagination/common/highlight.min.css" media="screen">
<link rel="stylesheet" type="text/css" href="/js/pagination/common/common.css" media="screen">
<link rel="stylesheet" type="text/css" href="/js/pagination/pagination.css" media="screen">
<script src="/js/pagination/common/highlight.min.js"></script>
<script src="/js/pagination/jquery.pagination.js"></script>

<script type="text/javascript">
    $(function () {
        query(1,10);
    });

    var url = "/Server/DevicesToPage";

    var queryStr = {};

    function getJson(url, data, func) {
        $.getJSON(url, data, func);
    }

    //進行查詢
    function query(page, pageSize) {
        queryStr.page = page;
        queryStr.pageSize = pageSize;
        getJson(url+"?random=" + Math.random(), queryStr, loadlist);
    }

    function showResult(json)
    {
        $(".loaded-data").remove();
        for (var i = 0; i < json.data.length; i++) {
            var fdlist = "[";
            var list = json.data[i].listClientInfo;
            var count = 0;
            for (var j = 0; j < list.length; j++) {
                var index = 0;
                // JSON轉字串
                var jStr = "{ ";
                for (var item in list[j]) {
                    if (index == 0) {
                        jStr += "'" + item + "':'" + list[j][item] + "'";
                    }
                    else {
                        jStr += ",'" + item + "':'" + list[j][item] + "'";
                    }
                    index++;
                }
                jStr += " }";
                if (count == 0) {
                    fdlist += jStr;
                } else {
                    fdlist += "," + jStr;
                }
                count++;
            }
            fdlist += "]";

            $("#data-table").append(
                "<tr class=\"loaded-data\"><th>" +
                json.data[i].remoteInfo + "</th><th>" +
                json.data[i].sim + "</th><th>" +
                json.data[i].channel + "</th><th>"
                + fdlist + "</th></tr > ")
        }
    }
    //返回結果處理:注意JSON欄位的大小寫問題
    function loadlist(json) {     
        showResult(json);
        //初始化分頁控制元件
        $(".M-box3").pagination({
            pageCount: json.totalPage,
            totalData: json.totalData,
            current: json.currentPage,
            showData: json.pageSize,
            jump: true,
            coping: true,
            homePage: '首頁',
            endPage: '末頁',
            prevContent: '上頁',
            nextContent: '下頁',
            callback: function (api)
            {
                // 當前第幾頁
                queryStr.page = api.getCurrent();

                $.getJSON(url + "?random=" + Math.random(), queryStr, function (json) {
                    showResult(json);
                });
            }
        });
    }

    function reload()
    {
        query(1, 10);
    }

</script>