前台:
<head> <meta charset="UTF-8"> <title>公告列表</title> <link rel="stylesheet" href="${request.contextPath}/static/user/css/change.css" /> <link rel="stylesheet" href="${request.contextPath}/static/user/css/pintuer.css" /> <link rel="stylesheet" type="text/css" href="${request.contextPath}/static/admin/css/assert/jquery.mloading.css"/> <link rel="stylesheet" type="text/css" href="${request.contextPath}/static/admin/css/assert/alert.css"/> <link rel="stylesheet" type="text/css" href="${request.contextPath}/static/admin/css/teacher/my.css"/> <script type="text/javascript" src="${request.contextPath}/static/user/js/jquery.js"></script> <script type="text/javascript" src="${request.contextPath}/static/user/js/pintuer.js"></script> <script src="${request.contextPath}/static/user/js/vue/vue.min.js"></script> <script src="${request.contextPath}/static/user/js/assert/jquery.mloading.js" type="text/javascript" charset="utf-8"></script> <script src="${request.contextPath}/static/user/js/assert/alert.js" type="text/javascript" charset="utf-8"></script> </head>
<section class="container margin-large-top" id="app" style="display: none"> <div class="container margin-big-bottom"> <h5>公告列表</h5> </div> <ul class="list-text list-underline list-striped"> <li v-for="anno in content"><span class="date">{{formatDate(anno.addTime)}}</span><a href="JavaScript:;" v-on:click="titleInfo(anno.annoId)" class="text-main">{{anno.annoTitle}}</a></li> <#--分页--> <div class="container text-center margin-big-top margin-big-bottom"> <ul class="pagination pagination-group"> <li> <a href="javaScript:;" v-on:click="prePage()">上一页</a> </li> <li> <a href="javaScript:;" v-on:click="nextPage()">下一页</a> </li> </ul> </div> </section>
<script type="text/javascript"> var v; var size=10; //页面开始时加载 $(function () { loadData(0, size); }); //发送获取所有数据请求 function loadData(pager, size) { refreshStart(); $.ajax({ url: "${request.contextPath}/user/findAllAnnoList", type: "post", timeout: 20000, dataType: "json", data: { pager: pager, size: size }, //请求成功时 success: function (result, status) { console.log(result); if (result.resultCode == 0) { // $("#listEmptyMessage").css("display", "block"); } else { getVue(result, status); $("#app").css("display", "block"); // } } refreshEnd(); }, //请求失败时 error: function () { refreshEnd(); alertWarnInfo("网络请求失败"); } }); } //创建表格数据 function getVue(result, status) { if (v) { v.$set(v.$data, "result", result); v.$set(v.$data, "content", result.resultObj.content); } else { v = new Vue({ el: '#app', data: { result: result, content: result.resultObj.content, }, methods: { //格式化时间戳 formatDate: function (value) { var date = new Date(value); Y = date.getFullYear(), m = date.getMonth() + 1, d = date.getDate(), H = date.getHours(), i = date.getMinutes(), s = date.getSeconds(); if (m < 10) { m = '0' + m; } if (d < 10) { d = '0' + d; } if (H < 10) { H = '0' + H; } if (i < 10) { i = '0' + i; } if (s < 10) { s = '0' + s; } var t = Y + '-' + m + '-' + d ; return t; }, // 下一页 nextPage: function () { var result = v.$data.result; if (result.resultObj.last) { alertWarnInfo("已是最后一页"); } else { var p = result.resultObj.number + 1; loadData(p, size); } }, //上一页 prePage: function () { var result = v.$data.result; if (result.resultObj.first == true) alertWarnInfo("已经是第一页了") else { var p = result.resultObj.number - 1; loadData(p, size); } } }, }); } } //警告窗口
function alertWarnInfo(info) { myWarnAlert = jqueryAlert({ 'title': '温馨提示', 'content': info, 'modal': true, 'width': '30%', 'height': "20%", 'animateType': 'linear', 'buttons': { '取消': function () { myWarnAlert.close(); } } }); }
</script>