1，页面展示：
注：分页功能的按钮，需要数据加载才会呈现，它放在一个js方法里面了；
2，html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>林子商城订单页面</title>
<link rel="stylesheet" href="css/order.css">
</head>
<body>
<div class="container">
<div class="header">我的订单</div>
<div class="search-container">
<input type="text" class="search-box" placeholder="请输入搜索内容">
<button class="search-button">搜索</button>
</div>
<div class="order_list">
<div class="order-container">
<div class="header-section">
<!-- 假设订单号和照片信息为占位符，实际使用时需替换为真实数据 -->
<div>序号：<span>1</span></div>
<div>订单号：<span >123456789</span> </div>
<!-- 图片信息未直接用于HTML结构，但可根据需求添加 -->
</div>
<div class="table-section">
<table class="order-table">
<thead>
<tr>
<th>商品图</th>
<th>商品名称</th>
<th>数量</th>
<th>金额</th>
<th>用户名</th>
<th>收货地址</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody class="gomaixq">
<tr>
<td class="danhaoyzp">
<img src="https://c.53326.com/d/file/lan20221010/3stzz5a1be5.jpg">
</td>
<td>
<span >金发碧眼高马尾女孩平板壁纸，清新报纸墙背景，面！</span>
</td>
<td>
<span >1</span>
</td>
<td>
<span class="money" >1000.00000</span>
</td>
<td>
<span >林子爱爱爱爱啊哎哎哎</span>
</td>
<td>
<span >广东省广州市 </span>
</td>
<td>
<span class="paytomoney" > 未支付</span>
</td>
<td class="orderanniu">
<button>确认收货</button>
<button>订单详情</button>
<button>取消订单</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="order-container">
<div class="header-section">
<div>序号：<span>1</span></div>
<div>订单号：<span >123456789</span> </div>
</div>
<div class="table-section">
<table class="order-table">
<thead>
<tr>
<th>商品图</th>
<th>商品名称</th>
<th>数量</th>
<th>金额</th>
<th>用户名</th>
<th>收货地址</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody class="gomaixq">
<tr>
<td class="danhaoyzp">
<img src="https://c.53326.com/d/file/lan20221010/3stzz5a1be5.jpg">
</td>
<td>
<span >金发碧眼高马尾女孩平板壁纸，清新报纸墙背景，面！</span>
</td>
<td>
<span >1</span>
</td>
<td>
<span class="money" >1000.00000</span>
</td>
<td>
<span >林子爱爱爱爱啊哎哎哎</span>
</td>
<td>
<span >广东省广州市 </span>
</td>
<td>
<span class="paytomoney" > 未支付</span>
</td>
<td class="orderanniu">
<button>确认收货</button>
<button>订单详情</button>
<button>取消订单</button>
</td>
</tr>
</tbody>
</table>
</div>
<!-- 假设没有额外的底部按钮需求，可根据实际要求添加 -->
</div>
</div>
</div>
<div id="error-message" style="display: none; color: red;"></div>
<!--进行分页-->
<div class="pagination-container" id="pagination-container"></div>
<script src="js/order.js"></script>
<script>
function confirmReceipt() {
alert("确认收货操作");
// 实际的确认收货逻辑需要后端支持
}
function viewDetails() {
alert("查看订单详情");
// 实际的查看详情逻辑需要跳转到详情页面或弹出模态框
}
function cancelOrder() {
alert("取消订单操作");
// 实际的取消订单逻辑需要后端支持
}
// 辅助函数：将状态码转换为文本
function getStatusText(status) {
const statusMap = {
0: '未支付',
1: '已支付',
2: '已发货',
3: '已收货',
4: '已退货',
5: '已完成'
};
return statusMap[status] || '未知状态';
}
</script>
</body>
</html>
3，css样式
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f7f7f7;
background-image: url("https://c.53326.com/d/file/lan20221010/btsox2ivzc3.jpg");
}
.container {
width: 93%;
margin: 50px auto;
padding: 20px;
background-color: rgba(255,255,255,0.8);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}
.header {
margin-bottom: 20px;
font-size: 24px;
font-weight: bold;
text-align: center;
}
.order-container {
width: 100%;
display: flex;
flex-direction: column;
box-shadow: 0 0 10px rgba(78, 78, 78, 0.5);
border-radius: 2px ;
}
.table-section {
display: flex;
flex: 1;
overflow-x: auto;
}
.order-table {
width: 100%;
border-collapse: collapse;
}
.order-table th {
border: 2px solid #797676;
padding: 10px;
text-align: center;
}
.header-section div{
float: left;
margin: 0 30px 2px 0;
font-size: 17px;
}
.danhaoyzp img{
width: 150px;
height: 130px;
}
/*按钮*/
.orderanniu {
display: flex;
flex-direction: column; /* 垂直排列子元素 */
justify-content: center; /* 垂直居中 */
align-items: center; /* 水平居中（如果需要） */
height: 100%; /* 确保 td 有高度，可以设置一个具体高度或百分比 */
}
.orderanniu button {
margin: 11px 0; /* 可选：为按钮添加一些垂直间距 */
}
.gomaixq td{
border: 2px solid #c2bcbc;
padding: 2px;
table-layout: fixed; /* 固定列宽 */
text-align: center;
overflow: hidden;
}
.gomaixq tr td:nth-child(2) { width: 220px; }
.gomaixq tr td:nth-child(6) { width: 420px; }
.money{
font-size: 19px;
color: #bb2121;
}
.paytomoney{
font-style: oblique;
color: #007BFF;
}
.header-section{
margin-top: 10px;
}
/* 搜索框 */
.search-container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中（如果需要） */
margin-top: 7px; /* 顶部外边距，可根据需要调整 */
margin-bottom: 5px;
}
/* 搜索框样式 */
.search-box {
width: 300px;
height: 30px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
}
/* 搜索按钮样式 */
.search-button {
height: 42px;
width: 80px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.pagination-container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
margin: 20px 0; /* 上下间距 */
width: 100%; /* 占满父容器宽度 */
}
.pagination {
display: inline-flex; /* 内联弹性布局 */
flex-wrap: wrap; /* 自动换行 */
gap: 50px; /* 按钮间距 */
padding: 10px; /* 内边距 */
border-radius: 8px; /* 圆角 */
background-color: #f8f9fa; /* 背景色 */
box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 阴影 */
}
.pagination-btn {
padding: 8px 14px;
border: 1px solid #ddd;
background-color: white;
cursor: pointer;
border-radius: 4px;
font-size: 14px;
transition: all 0.2s; /* 平滑过渡 */
}
.pagination-btn:hover:not(:disabled) {
background-color: #f0f7ff; /* 悬停效果 */
border-color: #007BFF;
}
.pagination-btn.active {
background-color: #007BFF;
color: white;
border-color: #007BFF;
font-weight: 600;
}
.pagination-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.pagination-ellipsis {
padding: 8px;
color: #999;
}
.error {
color: #f44336;
padding: 20px;
text-align: center;
font-size: 14px;
}
/* 响应式调整 */
@media (max-width: 600px) {
.pagination {
padding: 8px;
gap: 3px;
}
.pagination-btn {
padding: 6px 10px;
font-size: 12px;
}
}
4，js部分代码
function createPagination({
apiUrl,
containerId,
pageSize = 7,
onDataLoaded
}) {
const container = document.getElementById(containerId);
if (!container) {
// console.error(`找不到容器元素: #${containerId}`);
return;
}
let currentPage = 1;
let totalPages = 1;
let isLoading = false;
// 渲染分页控件
function renderPagination() {
container.innerHTML = '';
// 添加上一页按钮
const prevButton = createButton('上一页', () => {
if (currentPage > 1) {
loadPage(currentPage - 1);
}
});
prevButton.disabled = currentPage === 1;
container.appendChild(prevButton);
// 计算显示的页码范围
const displayRange = 2;
let startPage = Math.max(1, currentPage - displayRange);
let endPage = Math.min(totalPages, currentPage + displayRange);
// 添加首页和省略号
if (startPage > 2) {
addPageButton(1);
if (startPage > 3) {
addEllipsis();
}
}
// 添加当前页附近的页码
for (let i = startPage; i <= endPage; i++) {
addPageButton(i);
}
// 添加尾页和省略号
if (endPage < totalPages - 1) {
if (endPage < totalPages - 2) {
addEllipsis();
}
addPageButton(totalPages);
}
// 添加下一页按钮
const nextButton = createButton('下一页', () => {
if (currentPage < totalPages) {
loadPage(currentPage + 1);
}
});
nextButton.disabled = currentPage === totalPages;
container.appendChild(nextButton);
}
// 创建按钮元素
function createButton(text, onClick) {
const button = document.createElement('button');
button.textContent = text;
button.className = 'pagination-btn';
button.addEventListener('click', onClick);
return button;
}
// 添加页码按钮
function addPageButton(pageNum) {
const button = createButton(pageNum, () => {
if (pageNum !== currentPage) {
loadPage(pageNum);
}
});
if (pageNum === currentPage) {
button.classList.add('active');
}
container.appendChild(button);
}
// 添加省略号
function addEllipsis() {
const span = document.createElement('span');
span.textContent = '...';
span.className = 'pagination-ellipsis';
container.appendChild(span);
}
// 加载指定页数据
async function loadPage(page) {
if (isLoading) return;
isLoading = true;
currentPage = page;
try {
const response = await fetch(`${apiUrl}?page=${page}&pageSize=${pageSize}`);
if (!response.ok) {
throw new Error(`HTTP错误: ${response.status}`);
}
const result = await response.json();
if (result.code !== 200) {
throw new Error(result.message || '获取数据失败');
}
// 提取分页数据
const {orderList, totalCount} = result.obj;
totalPages = Math.ceil(totalCount / pageSize);
// 调用回调函数处理数据
if (typeof onDataLoaded === 'function') {
onDataLoaded(orderList);
}
// 重新渲染分页控件
renderPagination();
} catch (error) {
// console.error('加载数据失败:', error);
if (typeof onDataLoaded === 'function') {
onDataLoaded(null, error);
}
} finally {
isLoading = false;
}
}
// 初始化加载第一页
loadPage(1);
// 返回分页组件API
return {
reload: () => loadPage(currentPage),
setPage: (page) => loadPage(page),
getCurrentPage: () => currentPage,
getTotalPages: () => totalPages
};
}
5，分页方法如何调用
document.addEventListener('DOMContentLoaded', () => {
//
createPagination({
apiUrl: '/listorder_pg',
containerId: 'pagination-container',
pageSize: 7,
onDataLoaded: (data, error) => {
if (error) {
// 显示错误信息
console.log('获取订单列表失败:', error);
return;
}
// 处理返回的数据
// 这里可以根据data渲染表格或其他UI
}
});
});
大概就这样。
扫一扫
1491
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
