WebContent/WEB-INF/jsp/pc/activity/activityList.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>文章列表</title>
		<link rel="stylesheet" href="/zzhnc/res/plugins/layui/css/layui.css">
		<link rel="stylesheet" href="/zzhnc/res/css/basic.css">
	</head>

	<body class="wrap">
		<div class="layui-form">
			<div class="layui-form-item searchbox" style="margin-bottom: 0px;">
				<div class="layui-input-inline">
					<input type="text" class="layui-input" name="keyword" placeholder="关键字" />
				</div>
				<button class="layui-btn" lay-submit lay-filter="querybtn">查询</button>
				<button class="layui-btn layui-btn-primary resetBtn">重置</button>
				<a class="layui-btn layui-btn-warm createBtn" href="#"><i class="layui-icon">&#xe61f;</i> 添加文章</a>
			</div>
		</div>
		<table class="layui-table">
			<thead>
				<tr>
					<th>No</th>
					<th style="width: 130px;">主图</th>
					<th>标题</th>
					<th>类型</th>
					<th>更新时间</th>
					<th style="min-width: 98px;">操作</th>
				</tr>
			</thead>

			<tbody id="tablelist">
			</tbody>
		</table>
		<div class="nodata">暂无数据</div>
		<div id="page"></div>

	</body>

	<script src='/zzhnc/res/js/jquery.min.js'></script>
	<script src="/zzhnc/res/plugins/layui/layui.js" charset="utf-8"></script>
	<script type="text/javascript" src="/zzhnc/res/js/me.js"></script>
	<script>
		layui.use(['form', 'element', 'laydate', 'layer', 'laypage'], function() {
			var form = layui.form,
				element = layui.element,
				laydate = layui.laydate,
				layer = layui.layer,
				laypage = layui.laypage;

			var queryObj = {
				page: 1,
				pagesize: 5,
				keyword: null
			};

			//初始化方法
			function initData(queryObj) {
				$.get("/zzhnc/article/getArticlesList", queryObj, function(data) {
					var data = data.data;
					console.log(data)
					$("#tablelist").html("");
					if(data.code == 0) {
						if(data.rows.length < 1) {
							$(".nodata").show();
						} else {
							$(".nodata").hide();
							var str = "";
							for(var i = 0; i < data.rows.length; i++) {
								str += '<tr data-id=' + data.rows[i].id + '>' +
									'<td>' + ((data.page - 1) * data.pageSize + i + 1) + '</td>' +
									'<td><img src="' + data.rows[i].imgurl + '" style="width: 100px; height: 100px;" /></td>' +
									'<td>' + data.rows[i].title + '</td>' +
									'<td>' + toType(data.rows[i].type) + '</td>' +
									'<td>' + toTime_G(data.rows[i].createdtime) + '</td>' +
									'<td>' +
									'<a href="#" class="layui-btn layui-btn-sm updataBtn">修改</a>' +
									'<a href="#" class="layui-btn layui-btn-sm deleteBtn">删除</a>' +
									'</td>' +
									'</tr>';
							}
							$("#tablelist").html(str);
							form.render();
							toNull_G();
						}
						laypage.render({
							elem: 'page',
							count: data.total,
							limit: queryObj.pagesize,
							curr: queryObj.page,
							layout: ['count', 'prev', 'page', 'next', 'skip'],
							jump: function(obj, first) {
								if(!first) {
									queryObj.page = obj.curr
									initData(queryObj);
								}
							}
						})
					}
				})
			}

			//初始化数据
			initData(queryObj);

			//查询
			form.on('submit(querybtn)', function(data) {
				queryObj.keyword = $("[name=keyword]").val();
				queryObj.page = 1;
				initData(queryObj)
			});

			//重置
			$(".resetBtn").on("click", function() {
				$("[name=keyword]").val("")
				queryObj.page = 1;
				queryObj.keyword = null;
				initData(queryObj)
				return false
			})

			//添加文章
			$(document).on("click", ".createBtn", function() {
				if(parent.tab.exists("添加文章") > 0) {
					var tabid = parent.tab.getTabId("添加文章");
					parent.tab.deleteTab(tabid);
				}
				parent.tab.tabAdd({
					href: "/zzhnc/activity/activityEdit",
					icon: "fa-cubes",
					title: "添加文章"
				});
			})

			//修改文章
			$(document).on("click", ".updataBtn", function() {
				var id = $(this).parents("tr").attr("data-id");
				if(parent.tab.exists("修改文章") > 0) {
					var tabid = parent.tab.getTabId("修改文章");
					parent.tab.deleteTab(tabid);
				}
				parent.tab.tabAdd({
					href: "/zzhnc/activity/activityEdit?id=" + id,
					icon: "fa-cubes",
					title: "修改文章"
				});
			})

			//删除文章
			$(document).on("click", ".deleteBtn", function() {
				var id = $(this).parents("tr").attr("data-id");
				layer.confirm('您确定要删除该文章吗？', {
					btn: ['确定', '取消'] //按钮
				}, function(index, layero) {
					$.get("/zzhnc/article/deleteArticle", {
						id: id
					}, function(data) {
						console.log(data)
						if(data.code == 0) {
							top.layer.msg("删除成功");
							initData(queryObj);
							layer.close(index);
						} else {
							top.layer.msg(data.msg);
						}
					})

				}, function(index, layero) {
					layer.close(index);
				});
			});

			//专区类型转换
			function toType(t) {
				if(t == 1) {
					return t = "活动介绍"
				} else {
					return t = "福利专区"
				}
			}

		})
	</script>

</html>