概述:数据比较多的时候,常使用分页。这里使用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