<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
/* css样式表 */
span {
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid gray;
text-align: center;
border-radius: 5px;
margin: 0px 5px;
line-height: 20px;
cursor: pointer;
}
.page {
padding: 20px 0px;
}
.blue {
background: deepskyblue;
}
img {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<!-- 盒子样式 -->
<table border id="tables">
</table>
<div class="page">
</div>
<div >
<input type="number">
<button>跳转</button>
</div>
</body>
<!-- 引入jQuery -->
<script src="./jquery-3.4.1.min copy.js"></script>
<script>
var size = 6
//现在是第几页
var num = 1
function getList() {
$.ajax({
type: 'GET', //GET
url: 'http://120.77.38.79:8080/demo/api/product',
//参数
data: {
pageSize: size,
pageNum: num
},
dataType: 'json',
success: function(res) {//ajaxSuccess() 方法规定 AJAX 请求成功完成时运行的函数。
$("#tables").empty()//清除
$(".page").empty()
console.log(res.data.data)
var data=res.data.data
//添加手机的tr
//插入表格
$("#tables").append('<tr><th>手机名称</th><th>报价</th><th>手机图片</th></tr>')
//添加数据
for(var i=0;i<data.length;i++){
$("#tables").append('<tr><td>' + data[i].name + '</td><td>' + data[i].price + '</td><td><img src="' + data[i].image + '" /></td></tr>')
}
//插入分页
var page = Math.ceil(res.data.pageCount / size)//pageCount14条句子除于每页4条所以就是三页
// console.log(page)
for(var j=0;j<page;j++){
$(".page").append("<span onclick='changePage("+j+")'>"+parseInt(j+1)+"</span>")//append()在每个 p 元素结尾插入内容：
}
$(".page span").eq(num-1).addClass("blue")
}
});
}
getList()
//下面的小框框的1 2 3 从0开始所以要加1
function changePage(ind){
num = ind + 1
getList()
}
$("button").click(function() {//跳转的那个方法
var value = $("input").val()//设置输入域的值
if (value < 1) {
alert("请输入大于1的页码数")
$("input").val(1)
num = 1
getList()
return false
}
console.log(value)
num = value
getList()
})
</script>
</html>