• MVC下实现LayUI分页的Demo



    640?wx_fmt=png

    1、后台获取数据示例

     public JsonResult GetPageNew(int page,int pagesize)

            {

                var list = _context.ArticleInfo.Skip(page).Take(pagesize).ToList();

                return Json(new { data = list, total = list.Count });

            }


    2、View视图

    <head>

        <meta charset="UTF-8">

        <title>博客</title>

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="../res/layui/css/layui.css">

        <link rel="stylesheet" href="../res/static/css/mian.css">

        <script src="~/lib/jquery/dist/jquery.js"></script>  

    </head>

    <body class="lay-blog">

      <div class="contar-wrap" id="divlist">             

      </div>

     <div id="demo20"></div>

    <body>

     <script src="~/res/layui/layui.js"></script>

      <script src="~/res/layui/lay/modules/laypage.js"></script>

    <script>    

            layui.use(['laypage', 'layer'], function () {

                var laypage = layui.laypage;

                   var layer = layui.layer;                    

                $.getJSON("/Home/GetPage", function (result) {

                    //调用分页

                    laypage.render({

                        elem: 'demo20'

                        , count: result.total,//总数量

                        limit: 1,

                       jump: function (obj, first) {                       

                            var str = "";                      

                           

                            if (!first) {

                                $.getJSON("/Home/GetPageNew?page=" + obj.curr + "&pagesize=" + obj.limit, function (result) {

                                    $("#divlist").html("正在加载中。。。");

                                    layui.each(result.data, function (index, item) {

                                        str += " <div class="item">";

                                        str += "<div class="item-box  layer-photos-demo1 layer-photos-demo">";

                                        str += " <h3><a href="details.html">" + item.title + "</a></h3><h5>发布于:<span>刚刚</span></h5>";

                                        str += "<div>" + item.contents + "</div>";

                                        str += "<div class="comment count"><a href = "javascript:;" > 评论</a ><a href="javascript:;" class="like">点赞</a></div >";

                                        str += "</div>";

                                        $("#divlist").html(str);                                 

                                    });

                                });

                            }

                            else {

                                $.getJSON("/Home/GetPageNew?page=1&pagesize=" + obj.limit, function (result) {

                                    $("#divlist").html("正在加载中。。。");

                                    layui.each(result.data, function (index, item) {

                                        str += " <div class="item">";

                                        str += "<div class="item-box  layer-photos-demo1 layer-photos-demo">";

                                        str += " <h3><a href="details.html">" + item.title + "</a></h3><h5>发布于:<span>刚刚</span></h5>";

                                        str += "<div>" + item.contents + "</div>";

                                        str += "<div class="comment count"><a href = "javascript:;" > 评论</a ><a href="javascript:;" class="like">点赞</a></div >";

                                        str += "</div>";

                                        $("#divlist").html(str);

                                        // arr.push('<li>' + item.title + '</li>');

                                    });

                                });                          

                            }                      

                        }

                    });

                });         

            });

        </script>


    简单效果:


    640?wx_fmt=png


  • 相关阅读:
    观察者模式股票提醒
    中介者模式虚拟聊天室
    模板方法模式数据库的连接
    职责链模式财务审批
    期末总结
    软件需求分析考试
    tomcat启动极其慢的解决方法困扰我一年多的问题终于解决
    状态模式银行账户
    解释器模式
    动态加载JS文件提升访问网站速度
  • 原文地址:https://www.cnblogs.com/hgmyz/p/12351495.html
Copyright © 2020-2023  润新知