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相关推荐
- java实现layui分页,MVC下实现LayUI分页的Demo
1.后台获取数据示例 public JsonResult GetPageNew(int page,int pagesize) { var list = _context.ArticleInfo.Ski ...
- layui table 表格两种赋值方式下，data分页效果有效， url分页效果的失效 问题的解决。
layui table 表格两种赋值方式下,data分页效果有效, url分页效果的失效 问题的解决. 参考文章: (1)layui table 表格两种赋值方式下,data分页效果有效, url分页 ...
- laravel+layui分页
前端部分 <div class="layui-card-body"><form class="layui-form"><table ...
- Response.End()在Webform和ASP.NET MVC下的表现差异
前几天在博问中看到一个问题--Response.End()后,是否停止执行?MVC与WebForm不一致.看到LZ的描述后,虽然奇怪于为何用Response.End()而不用return方式去控制流程 ...
- layui分页和模板引擎
模板引擎 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...
- SpringBoot-Vue实现增删改查及分页小DEMO
SpringBoot-Vue实现增删改查及分页小DEMO 前言 主要通过后端 Spring Boot 技术和前端 Vue 技术来简单开发一个demo,实现增删改查.分页功能以及了解Springboot ...
- layui分页快速使用
项目需要用layui的分页功能,但没工夫去学原理等等,直接拿来用. 1.建ResultBean类,用来返回前端表格需要的数据. 代码 package com.example.mybatisdemo.p ...
- layui分页数据表格渲染
最近需要对后台的数据进行分页渲染并且需要进行表头动态渲染,因此和小伙伴一起学习了layui的数据表格渲染,然后进行了改进,成功之后记录了下来 先说前端HTML和js代码 <script src= ...
- jquery ajax下拉联动,jQuery Ajax MVC 下拉框联动
无刷新下拉框联动方法: Controllers代码 public JsonResult DH_Change(string DH_ID) { List TeamLeaderList = FinanceD ...
最新文章
- 网络营销立足于网站自身的优化与运营
- 2018.8.8笔记
- 通向架构师的道路（第四天）之Tomcat性能调优-让小猫飞奔
- 轻松Ghost XP系统！
- 在知乎上泡了这么久，工作、工资、生活还是没有起色是什么原因？
- 爱上MVC~业务层刻意抛出异常,全局异常的捕获它并按格式返回
- Google Tensorflow Webset
- 关于波峰波谷趋势分割（想象中的方法），判断趋势，突然来想到的，记下来，没有实验。以便以后用于分割...
- 汇编语言王爽第四版 实验四（包括对【bx】，loop详解）
- 计算机桌面时间设置,桌面的时钟怎么设置
- 一个非常强大的视频、音频、二维码、图片、压缩等在线网址
- 一个直播例子：快速集成iOS基于RTMP的视频推流
- vue引入图片的方式
- 3D相机面临的困难问题和解决方案
- Java用栈实现排序_Java中的栈排序
- 干货！小样本分子性质预测新方法——性质感知的关系网络
- 抖音短视频怎样引流？有哪些方法？
- css实现渐变色字体
- 【原创】积性函数和狄利克雷卷积学习笔记 未完成
- 通过佰马智能网关搭建智慧灯杆系统