layui 分页的使用

HTML

<div id="article" class="article-list"></div>
<div id="demo7" style="margin-left:20px;"></div>

引用

<link href="~/Scripts/src/css/layui.css" rel="stylesheet" media="all" />
<script src="~/Scripts/src/layui.js" charset="utf-8"></script>

JS

layui.use(['laypage', 'layer'], function () {
    var laypage = layui.laypage
        , $ = layui.$, layer = layui.layer;
    let totalCount = 0;
    getPageData(1, 4);
    function getPageData(page, limit) {
        $.ajax({
            type: "post",
            async: false,
            url: "@Url.Action("GetBokeList")",
            data: {
                page: page,
                limit: limit
            },
            success: function (data) {
                totalCount = data.count;//数据总数量
                //这里渲染页面吧。
                let innerHtml = "";
                data.data.forEach((item, index, arr) => {
                    var reTag = /<img(?:.|\s)*?>/g;
                    innerHtml += "<div class='article-item-box csdn-tracking-statistics' data-articleid='109521874'><h4 class=''><a href='https://blog./weixin_43942765/article/details/109521874' target='_blank'><span class='article-type type-1 float-none'>原创</span>" + item.title + "</a></h4><p class='content'>" + item.content.replace(reTag, '') + "</p><div class='info-box d-flex align-content-center'><p><span class='date'>2020-11-05 22:17:09</span><span class='read-num'><img src='/Blog/image/readCountWhite.png' alt=''>28</span></p></div><div class='opt-box'><button class='btn-opt' data-type='top'>置顶</button><a class='btn-opt' data-type='edit' href='https://editor./md?articleId=109521874'>编辑</a><button class='btn-opt' data-type='delete'>删除</button></div></div>";
                    document.getElementById('article').innerHTML = innerHtml;
                });


            }
        });
    }
    //完整功能
    laypage.render({
        elem: 'demo7'
        , count: totalCount
        , limit: 4
        , layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
        , jump: function (obj, first) {
            //obj包含了当前分页的所有参数，比如：
            //console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
            //console.log(obj.limit); //得到每页显示的条数
            //首次不执行
            if (!first) {
                //do something
                getPageData(obj.curr, obj.limit);
            }
        }
    });
});

Controller.cs

public ActionResult GetBokeList(int page, int limit, string keyWord)
{
    using (CYFLiCaiDbContext entities = new CYFLiCaiDbContext())
    {
        var query = from a in entities.Tbl_Boke
                    select new
                    {
                        id = a.id,
                        title = a.title,
                        content = a.content,
                        updatedate = a.updatedate
                    };
        if (!string.IsNullOrEmpty(keyWord))
        {
            query = query.Where(x => x.title.Contains(keyWord));
        }
        var pageQuery = query.OrderByDescending(a => a.updatedate).Skip(limit * (page - 1)).Take(limit).ToList();
        var result = new
        {
            code = 0,
            msg = "",
            count = query.Count(),
            data = pageQuery
        };
        return Json(result, JsonRequestBehavior.AllowGet);
    }
}

参考地址https://blog.csdn.net/qq_38310446/article/details/103642765