|
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> 简单效果：
|
|
|
