<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>留言板</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script src="js/jquery.min.js" type="text/javascript"></script>
<style>
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p,body{
padding:0;margin:0;}
ul,li{list-style:none;}
img{border:0 none;}
a{ text-decoration:none; color:#666666; font-family:"微软雅黑";}
h1, h2, h3, h4, h5, h6 {font-size: 100%;font-weight: normal;}
body{ font-family:"微软雅黑"; font-size:14px; color:#595959; line-height:24px; background:#fff;}
.w1100{ 1100px; margin:0 auto;}
.clearfix:after { visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0;}
.clearfix { zoom:1;}
/*样式*/
.msg-dl dd{
float: left;
120px;
margin-top: 10px;
border-top: 1px solid #666666;
border-left: 1px solid #666666;
border-bottom: 1px solid #666666;
text-align: center;
}
.msg-dl dd:last-child{
border-right: 1px solid #666666;
300px;
}
#msgbox{
1200px;
margin:30px 0 0 30px;
position: relative;
}
#msgbox h2{
font-size: 16px;
text-align: left;
}
.msg-ul li{
display:flex;
}
.msg-ul{
height: 280px;
}
.msg-ul li span{
120px;
border-left: 1px solid #666666;
border-bottom: 1px solid #666666;
text-align: center;
line-height: 25px;
height: 25px;
}
.msg-ul li span:nth-of-type(5){
200px;
}
.msg-dl dd:nth-of-type(5){
200px;
}
.msg-ul li span:nth-of-type(6){
200px;
}
.msg-dl dd:nth-of-type(6){
200px;
}
.msg-ul li span:last-child{
border-right: 1px solid #666666;
300px;
}
#msgbox h3{
background: red;
color: #FFF;
position: absolute;
25px;
font-size: 12px;
padding:0 5px;
top: 100px;
left: 0;
}
ul.pagination {
display: inline-block;
padding: 0;
margin: 0;
}
ul.pagination li {display: inline;}
ul.pagination li a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
border: 1px solid blue;
border-radius:3px;
}
.active{
background-color: #7FFFAA;
}
.pagination li{
20px;
height:20px;
border:1px solid #000;
padding:3px 8px;
cursor:pointer;
margin: 0 3px;
}
.pager{
margin-top:20px;
}
.pager .page-active{
background:red;
color:#fff;
}
</style>
</head>
<body>
<div id="msgbox">
<h2>网站留言</h2>
<dl class="msg-dl clearfix">
<dd>序号</dd>
<dd>姓名</dd>
<dd>电话</dd>
<dd>项目名称</dd>
<dd>邮箱</dd>
<dd>留言内容</dd>
<dd>时间</dd>
</dl>
<ul class="msg-ul clearfix">
</ul>
<div class="pager">
<ul class="pagination">
</ul>
</div>
</div>
<script>
$(function(){
$.ajax({
type: "GET",
url: "./fetch.php",
success: function (res) {
var data = JSON.parse(res);
createLi(data.pagecount);
}
});
//获取数据
getData();
function getData(page){
var page = page || 1;
$.ajax({
type: "GET",
url: "./fetch.php",
data: {"pagenow":page},
success: function (res) {
var data = JSON.parse(res);
//console.log(data.pagecount);
cache.set(page,data.newarr);
renderData(data.newarr);
}
});
};
//闭包
var cache = cacheData();
function cacheData(){
var cache = {}; //声明一个缓存池变量
return{
set:function(page,doc){
cache[page] = doc; // 缓存
},//存储新数据
get:function(page){
if(page in cache){
renderData(cache[page])
//console.log("第"+page +"页面已经缓存，无需再次请求");
}else{
getData(page);
}
}//读取数据
}
};
//渲染页面
function renderData(data){
var msgUl = document.querySelector(".msg-ul");
var str = "";
data.forEach((item) => {
str +=`<li>
<span>${item.id}</span>
<span>${item.name}</span>
<span>${item.phone}</span>
<span>${item.pro}</span>
<span>${item.email}</span>
<span>${item.text}</span>
<span>${item.time}</span>
</li>`
})
msgUl.innerHTML= str;
}
//点击事件
var oUL = document.querySelector(".pagination");
oUL.addEventListener("click",function(e){
var e = e || window.event;
var oLi = oUL.querySelectorAll("li");
console.log(oLi)
if(e.target.tagName.toLowerCase() == "li"){
var page = e.target.innerText;
cache.get(page);
for(var i=0;i<oLi.length;i++){
oLi[i].className ="";
};
e.target.className = "page-active";
}
});
//生成分页
function createLi(pagetotal){
console.log(pagetotal);
var str = "";
for(var i=0;i<pagetotal;i++){
str += `<li>${i+1}</li>`
}
oUL.innerHTML = str;
var oLi = oUL.querySelectorAll("li");
oLi[0].className="page-active";
}
});
</script>
</body>
</html>