MVC下实现LayUI分页的Demo
Posted IT技术分享社区
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 ></script>
</head>
<body class="lay-blog">
<div class="contar-wrap" id="divlist">
</div>
<div id="demo20"></div>
<body>
<script ></script>
<script ></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>
简单效果：
以上是关于MVC下实现LayUI分页的Demo的主要内容，如果未能解决你的问题，请参考以下文章
layui点击主页面分页数据点击修改数据后 返回当前分页的页面数据没有刷新