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

巴特西