MVC下实现LayUI分页的Demo
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>
简单效果：
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· .NET10 - 预览版1新功能体验（一）
2017-12-26 c#中常用集合类和集合接口之集合类系列
2017-12-26 c#中常用集合类和集合接口之集合类系列
2017-12-26 c#中常用集合类和集合接口之集合类系列