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

这样一个分页就完成了。