Order Information
-
-
-
- | Order ID |
- Name |
- Phone |
- Email |
- Quantity |
- Payment Method |
- From Address |
- Create Timestamp |
- Update Timestamp |
- Status |
-
-
-
-
-
-
-
@@ -88,9 +108,12 @@
queryParams.page = queryParams.page || 1;
queryParams.pageSize = queryParams.pageSize || 10;
- // 查询接口
const apiBaseUrl = 'http://127.0.0.1:5000';
+
async function queryOrder() {
+ const loading = document.getElementById('loading');
+ loading.style.display = 'block'; // 显示加载动画
+
try {
const response = await fetch(`${apiBaseUrl}/queryOrder`, {
method: 'POST',
@@ -101,16 +124,19 @@
if (!response.ok) {
throw new Error('Failed to query orders');
}
+
const data = await response.json();
renderTable(data.orders);
updatePaginationButtons(data.totalOrders);
} catch (error) {
console.error('Network or server error:', error);
+ } finally {
+ loading.style.display = 'none'; // 隐藏加载动画
}
}
function renderTable(orders) {
- const tbody = document.querySelector('#orderTable tbody');
+ const tbody = document.getElementById('orderTableBody');
tbody.innerHTML = ''; // 清空表格内容
orders.forEach(order => {
const row = `
@@ -131,14 +157,13 @@
});
}
- // 更新分页按钮状态
function updatePaginationButtons(totalOrders) {
const totalPages = Math.ceil(totalOrders / queryParams.pageSize);
document.getElementById('prevPageBtn').disabled = queryParams.page <= 1;
document.getElementById('nextPageBtn').disabled = queryParams.page >= totalPages;
+ document.getElementById('currentPage').textContent = `Page: ${queryParams.page}`;
}
- // 翻页操作
document.getElementById('prevPageBtn').addEventListener('click', () => {
if (queryParams.page > 1) {
queryParams.page -= 1;
@@ -151,7 +176,6 @@
queryOrder();
});
- // 页面加载时查询第一页
queryOrder();