Asp.net core 实现无刷新分页

时间：2018-02-06 20:10:56 阅读：2749 评论：0 收藏：0 [点我收藏+]

标签：ima isp eve .net core new 设置 time 容器服务 list

技术分享图片

1.材料准备工作

jquery 分页插件下载
创建asp.net core web 应用程序

2.HomeController工作

1.创建显示实体model，创建分页请求model，创建给前端的json model　　

    public class OrderModel
    {
        public int Id { get; set; }

        public string Time { get; set; }
    }

    public class PaginationReqModel
    {
        public int CurrentPageIndex { get; set; }

        public int PageSize = 10;
    }

    public class PaginationResModel
    {
        public int DataCount { get; set; }

        public List<OrderModel> DisplayOrders { get; set; }
    }

View Code

　　2.模拟数据内容填充

        public List<OrderModel> Orders
        {
            get
            {
                var models = new List<OrderModel>();
                for (int i = 0; i < 300; i++)
                {
                    models.Add(new OrderModel()
                    {
                        Time = DateTime.Now.ToString("HH:mm:ss.ffff"),
                        Id = i + 1
                    });
                }
                return models;

            }
        }

View Code

　　3.分页方法（skip，take）

        public ActionResult GetData(PaginationReqModel prArgModelmodel)
        {
            var dispalyOrders = Orders.Skip((prArgModelmodel.CurrentPageIndex - 1) * prArgModelmodel.PageSize).Take(prArgModelmodel.PageSize).ToList();
            return Json(new PaginationResModel
            {
                DataCount = Orders.Count / prArgModelmodel.PageSize,
                DisplayOrders = dispalyOrders
            });
        }

View Code

3.Index工作

@using Pagination.Controllers
@{
    ViewData["Title"] = "Home Page";
}

<table id="sortform" class="table table-striped table-bordered">
    <thead>
        <tr>
            <th>Id</th>
            <th>Time</th>
        </tr>
    </thead>
    <tbody id="tableBody"></tbody>
</table>

<div class="m-style" id="M-box"></div>

<script>
    var currentPageIndex = 1;
    $(document).ready(getData(true));

    function getData(isFirst) {
        var url = "/Home/GetData";
        $.post(
            url,
            {
                CurrentPageIndex: currentPageIndex, PageSize: 10
            },
            function (jsonObject) {
                setData(jsonObject.DisplayOrders);
                if (isFirst) {
                    setPagination(jsonObject.DataCount);
                }
            });
    }

    function setPagination(pageCount) {
        $(‘#M-box‘).pagination({
            pageCount: pageCount,
            callback: pageCallback,//回调函数
            coping: true,
            homePage: ‘首页‘,
            endPage: ‘末页‘,
            prev_text: ‘上一页‘,//前一页显示的文本文字，字符串参数，可选，默认是"Prev"
            next_text: ‘下一页‘,//下一页显示的文本文字， 字符串参数，可选，默认是"Next"
            items_per_page: 10,//每页显示的条目数,已经设置为10条
            num_display_entries: 5,//连续分页主体部分显示的分页条目数,默认是10
            current_page: currentPageIndex,//当前页
            num_edge_entries: 1//两侧显示的首尾分页的条目数
        });
    }

    function pageCallback(selectIndex, jq) {
        currentPageIndex = selectIndex.getCurrent();
        getData(false);
    }

    function setData(data) {
        var html = "";
        data.forEach(p => {
            html += "<tr>";
            html += " <td>" + p.Id + "</td>";
            html += " <td>" + p.Time + "</td>";
            html += "</tr>";
        });
        $("#tableBody").html(html);
    }

</script>