本文实现下一页与上一页及单击页码实现页码内容更新功能
1，接口文档
{
"code": "1",
"msg": "获取成功",
"data": [{
"service_id": 1,//自增ID
"service_image": null,//头部图片
"service_mouth": null,//口碑分享
"service_process": null,//服务流程
"service_class": null//温暖课堂
}]
}
admin/api/service//api接口地址
2，html源码
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- <script type="text/javascript" src="../js/ajax.js"></script> -->
<style type="text/css">
*{margin: 0;padding: 0;}
.xxw{display: flex;flex-direction: row;justify-content: center;}
.xinwen{background: white;}
.xw{line-height: 50px;font-size: 18px;display: flex;flex-direction:row;justify-content:center;}
.xw.on{color: red;border-bottom: 1px solid red;width: 72px;margin:0 auto;}
.nihao{ display: flex;flex-direction: column;justify-content: space-around;background: white;}
</style>
</head>
<body>
<div class="nihao">
<div id="xs">
</div>
<div id="yema" style="display: flex;flex-direction: row;justify-content: center;background: white;margin-top: 10px;">
</div>
</div>
</body>
<script type="text/javascript">
var page = 1,pagesize=12,url;
url='mouth'
reqdata1();
function reqdata1(){
if(page<=0){
page ++ ;
return alert("没有零页")
} //点击上一页看效果
$.ajax({
url:'http://niumo.365hy.com/admin/api/'+url,
type:"post",
data:{page:page,pagesize:pagesize}, //页码 数量
success:function(res){
console.log(res);
if(res.data.length <= 0){
alert("已经是最后一页")
page -- ;
return
}
var pageNnm = Math.ceil(res.total / pagesize),//向上取整 页码总数量
pagehtml=' <a onclick="page--;reqdata1() " style="width: 60px;height: 25px;line-height: 25px;border:1px solid #b4b4b4;border-radius: 1px;color: #b4b4b4;margin:10px 5px; display:inline-block;text-align: center;">上一页</a>';
for (var index = 1; index <= pageNnm; index++) {
if(index == page){
pagehtml +='<a onclick="page = '+index+';reqdata1() " style="width: 25px;height: 25px;line-height: 25px;border-radius: 1px;margin:10px 5px;display:inline-block; background-color: green;color: red;border:1px solid #fa783b;text-align: center;">'+index+'</a>'
}else{
pagehtml +='<a onclick="page = '+index+';reqdata1() " style="width: 25px;height: 25px;line-height: 25px;border:1px solid #b4b4b4;border-radius: 1px;color: #b4b4b4;margin:10px 5px;display:inline-block;text-align: center;">'+index+'</a>'
}
}
pagehtml += '<a onclick="page++;reqdata1() " style="width: 60px;height: 25px;line-height: 25px;border:1px solid #b4b4b4;border-radius: 1px;color: #b4b4b4;margin:10px 5px;display:inline-block;text-align: center;">下一页</a>';
$("#yema").html(pagehtml);
var html='';
for (var i = 0; i <res.data.length; i++) {
html +='<li style="display: flex;flex-direction:column;margin-top: 2px;background: white;padding: 2px 10px;list-style: none;height: 70px;">'+
'<img src="'+res.data[i].mouth_image+'" style="width: 90px;height: 70px;">'+
'<div style="margin-left: 14px;">'+
'<p style="font-size: 15px;line-height: 20px;color: #6a6a6a;">'+res.data[i].mouth_title+'</p>'+
'</div>'+
'</li>'
}
$("#xs").html(html)
}
})
}
function aa(r){
page = 1;
url = r;
reqdata1();
}
</script>
</html>
![html+css像素块图片（游戏手柄）[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)