帮我写一个历史订单页面具有分页功能一个页面7条数据数据利用ajax请求从后端获取。包括上一页下一页和尾页按钮
<!DOCTYPE html>
<html>
<head>
<title>历史订单</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var page = 1; //当前页
var totalPage = 0; //总页数
var pageSize = 7; //每页数据条数
<pre><code> //获取数据函数
function getData(){
$.ajax({
url: "backend.php", //后端接口地址
type: "POST",
dataType: "json",
data: {page: page, pageSize: pageSize},
success: function(result){
if(result.code == 200){
$("#order-list").empty(); //清空原有数据
var data = result.data;
for(var i=0; i<data.length; i++){
var order = data[i];
var tr = $("<tr></tr>");
tr.append("<td>"+order.id+"</td>");
tr.append("<td>"+order.customer+"</td>");
tr.append("<td>"+order.product+"</td>");
tr.append("<td>"+order.price+"</td>");
tr.append("<td>"+order.time+"</td>");
$("#order-list").append(tr);
}
//更新分页信息
totalPage = result.totalPage;
$("#current-page").text(page);
$("#total-page").text(totalPage);
}else{
alert(result.msg);
}
},
error: function(){
alert("请求失败");
}
});
}
getData(); //页面加载时获取第一页数据
//上一页按钮点击事件
$("#prev-page").click(function(){
if(page > 1){
page--;
getData();
}
});
//下一页按钮点击事件
$("#next-page").click(function(){
if(page < totalPage){
page++;
getData();
}
});
//尾页按钮点击事件
$("#last-page").click(function(){
if(page < totalPage){
page = totalPage;
getData();
}
});
});
</script>
</code></pre>
</head>
<body>
<h1>历史订单</h1>
<table border="1">
<thead>
<tr>
<th>订单号</th>
<th>客户名称</th>
<th>产品名称</th>
<th>价格</th>
<th>下单时间</th>
</tr>
</thead>
<tbody id="order-list">
<!-- 数据展示区域 -->
</tbody>
</table>
<div>
<button id="prev-page">上一页</button>
<span>第<span id="current-page"></span>页/共<span id="total-page"></span>页</span>
<button id="next-page">下一页</button>
<button id="last-page">尾页</button>
</div>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/8fl 著作权归作者所有。请勿转载和采集!