ASP.NET MVC 分頁

概述：數據比較多的時候，常使用分頁。這里使用bootpag.js和PagedList這兩個插件實現。

准備JS的引用

1.這個是bootstrap 中pagination的庫

2..NET后台ToPagedList的dll

准備前端頁面

1.頁面主體
項目中添加一個view，叫HistoryCase

2.分頁部分，這是一個partial view

3.將分頁部分嵌入頁面主體，綁定對應model

准備后端分頁model

添加一個model，聲明分頁屬性

public class PaginationModelBase
{
    public string QueryString { get; set; }
    public int? PageIndex { get; set; }
    public int? PageSize { get; set; }        
    public string Order { get; set; }
}

public class PaginationModel : PaginationModelBase
{
    public int Type { get; set; }
}

public class HistoryPaginationModel : PaginationModelBase
{
    public string Status { get; set; }
    public DateTime? StartTime { get; set; }
    public DateTime? EndTime { get; set; }
}

這里的分頁，預留了查詢時候需要的接口。查詢條件為關鍵字（QueryString）,狀態（Status）,起始時間（End/Start Time）。

前端init分頁插件和ajax請求

初始化pagination，根據total count 和 page size，計算出 page count。

History.prototype.InitPagination = function (totalCount, isReInit, isReset) {
    var historyPage = this;
    var paginationHis = historyPage.$PaginationHis;

    var total = $('input[name="total-cnt"]').val();
    var pageSize = 5;
    pageSize = parseInt(pageSize);
    if (totalCount != null) {
        total = parseInt(totalCount);
    }
    if (total == 0) {
        paginationHis.addClass("hidden");
    } else {
        paginationHis.removeClass("hidden");
    }
    if (isReset) {
        paginationHis.bootpag({
            page: 1
        });
    }
    paginationHis.bootpag({
        total: Math.ceil(total / pageSize),
        maxVisible: 10
    }).on('page', function (event, num) {
        var ajaxUrl = "/Home/AjaxLoadCase";
        var postData = historyPage.GetSearchFormData();
        postData.Pagination = {
            PageIndex: num,
            PageSize: pageSize,
            Status: postData.Status,
            StartTime: postData.StartDate,
            EndTime: postData.EndDate
        }
        if (!isReInit || isReInit == undefined) {
            historyPage.LoadDataAjax(ajaxUrl, postData, false);
        }
    });
}

當點擊page num 的時候，觸發ajax請求。

History.prototype.LoadDataAjax = function (ajaxUrl, postData, isRest) {
    var history = this;
    $.blockUI();
    $.ajax(ajaxUrl, {
        dataType: 'html',
        data: postData,
        timeout: 12000,
        method: "POST",
        success: function (data) {
            $('input[name="total-cnt"]').remove();
            var $caseTable = $('.histroy-case');
            $caseTable.remove();
            $('.hitory-msg').remove();

            $(data).insertBefore(history.$PaginationHis);
            var totalCount = $('input[name="total-cnt"]').val();
            history.InitPagination(totalCount, true, isRest);
            history.AlertSucc("Get case list succeed.")
            $.unblockUI();
        },
        error: function (error) {
            history.AlertError("Internal occurs error, please try again.")
            $.unblockUI();
        },
        complete: function () {
            $.unblockUI();
        }
    });
}

邏輯為，發送請求，請求成功，將原來的數據remove，將返回的數據重新綁定到對應元素上。

后台返回partial view和model

注意每次要更新total count。

這是第一頁，也是頁面第一次渲染時展示的頁面；

點擊第四頁，即可返回正確list

這樣一個分頁就完成了。