帮我写一个历史订单页面具有分页功能一个页面7条数据数据利用ajax请求从后端获取。包括上一页下一页和尾页按钮包括node后端代码
HTML代码：
<!DOCTYPE html>
<html>
<head>
<title>历史订单页面</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var currentPage = 1; //当前页码
var pageSize = 7; //每页数据条数
//加载数据函数
function loadData(){
$.ajax({
type: "GET",
url: "/historyOrders",
data: {currentPage: currentPage, pageSize: pageSize},
dataType: "json",
success: function(data){
var html = "";
for(var i=0; i<data.length; i++){
html += "<tr>";
html += "<td>" + data[i].orderId + "</td>";
html += "<td>" + data[i].productName + "</td>";
html += "<td>" + data[i].price + "</td>";
html += "<td>" + data[i].quantity + "</td>";
html += "<td>" + data[i].totalPrice + "</td>";
html += "</tr>";
}
$("#orderList tbody").html(html); //将数据填充到表格中
}
});
}
loadData(); //页面加载时加载第一页数据
//上一页按钮点击事件
$("#prevBtn").click(function(){
if(currentPage > 1){
currentPage--;
loadData();
}
});
//下一页按钮点击事件
$("#nextBtn").click(function(){
currentPage++;
loadData();
});
//尾页按钮点击事件
$("#lastBtn").click(function(){
$.ajax({
type: "GET",
url: "/historyOrdersCount",
dataType: "json",
success: function(data){
var totalPage = Math.ceil(data / pageSize); //计算总页数
currentPage = totalPage;
loadData();
}
});
});
});
</script>
</head>
<body>
<table id="orderList" border="1">
<thead>
<tr>
<th>订单号</th>
<th>商品名称</th>
<th>单价</th>
<th>数量</th>
<th>总价</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div>
<button id="prevBtn">上一页</button>
<button id="nextBtn">下一页</button>
<button id="lastBtn">尾页</button>
</div>
</body>
</html>
Node.js后端代码：
const express = require("express");
const app = express();
const bodyParser = require("body-parser");
const port = 3000;
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
//模拟订单数据
const orders = [
{orderId: "001", productName: "商品1", price: 10, quantity: 2, totalPrice: 20},
{orderId: "002", productName: "商品2", price: 20, quantity: 3, totalPrice: 60},
{orderId: "003", productName: "商品3", price: 30, quantity: 4, totalPrice: 120},
{orderId: "004", productName: "商品4", price: 40, quantity: 5, totalPrice: 200},
{orderId: "005", productName: "商品5", price: 50, quantity: 6, totalPrice: 300},
{orderId: "006", productName: "商品6", price: 60, quantity: 7, totalPrice: 420},
{orderId: "007", productName: "商品7", price: 70, quantity: 8, totalPrice: 560},
{orderId: "008", productName: "商品8", price: 80, quantity: 9, totalPrice: 720},
{orderId: "009", productName: "商品9", price: 90, quantity: 10, totalPrice: 900},
{orderId: "010", productName: "商品10", price: 100, quantity: 11, totalPrice: 1100},
{orderId: "011", productName: "商品11", price: 110, quantity: 12, totalPrice: 1320},
{orderId: "012", productName: "商品12", price: 120, quantity: 13, totalPrice: 1560},
{orderId: "013", productName: "商品13", price: 130, quantity: 14, totalPrice: 1820},
{orderId: "014", productName: "商品14", price: 140, quantity: 15, totalPrice: 2100},
{orderId: "015", productName: "商品15", price: 150, quantity: 16, totalPrice: 2400}
];
//获取历史订单数据
app.get("/historyOrders", (req, res) => {
let currentPage = req.query.currentPage;
let pageSize = req.query.pageSize;
let startIndex = (currentPage - 1) * pageSize;
let endIndex = startIndex + pageSize;
let data = orders.slice(startIndex, endIndex);
res.json(data);
});
//获取历史订单总数
app.get("/historyOrdersCount", (req, res) => {
res.json(orders.length);
});
app.listen(port, () => console.log(`Server is running on port ${port}!`));
原文地址: https://www.cveoy.top/t/topic/8fP 著作权归作者所有。请勿转载和采集!