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>
簡單效果：
總結
以上是生活随笔為你收集整理的MVC下实现LayUI分页的Demo的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Visual Studio Code超级
- 下一篇： s3c2440移植MQTT