• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

ASP.NET MVC 分页

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

这样一个分页就完成了。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap