订单分页显示：order_info.jsp
====关于页面显示，最容易忘记：订单，订单项双层 <c:forEach>遍历。至于分页，分页用的PageBean封装好了，不难做。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>订单列表页面</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css" type="text/css" />
<script src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js" type="text/javascript"></script>
<!-- 引入自定义css文件 style.css -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css" type="text/css" />
<style>
body {
margin-top: 20px;
margin: 0 auto;
}
.carousel-inner .item img {
width: 100%;
height: 300px;
}
</style>
<script type="text/javascript">
function myToggle(oid){
$("#" + oid).toggle();
}
</script>
</head>
<body>
<!--
描述：菜单栏
-->
<!--
描述：导航条
-->
<!--
因为菜单栏和导航条在任何页面都有使用，
所以为了方便统一维护，增强代码的扩展性
我们将其抽取成为一个单独的JSP页面--header.jsp
然后静态导入进来即可
-->
<%@include file="header.jsp" %>
<div class="container">
<div class="row">
<div style="margin:0 auto; margin-top:10px;width:950px;">
<strong>我的订单</strong>
<table class="table table-bordered">
<c:forEach var="od" items="${pb.result }">
<tbody>
<tr class="success">
<th colspan="2">
订单编号: ${od.oid}
<%-- <input type="button" value="加载/隐藏" class="btn btn-primary" οnclick="myToggle( ${od.oid})"/> --%>
<%-- <input type="button" value="加载/隐藏" class="btn btn-primary" οnclick="myToggle('${od.oid}');"/> --%>
<input type="button" value="加载/隐藏" class="btn btn-primary" οnclick="myToggle('${od.oid}')"/>
</th>
<th>所属用户： ${od.user.username }</th>
<th>订单金额: ${od.total }</th>
<th>订单状态:
<c:if test="${od.state==0 }">
<a href="${pageContext.request.contextPath}/OrderServlet?method=findByOid&oid=${od.oid}">未付款</a>
</c:if>
</th>
</tr>
<tr class="active">
<td colspan="5">
<!-- JQuery选择器操作获取 一个订单 Table：$("#"+oid)。
==========####################============
【id=" ${od.oid}",id值多了一个空格，妈蛋JS就是没用。=====找了一个多小时！！！】
<table class="table table-bordered" id=" ${od.oid}">
-->
<table class="table table-bordered" id="${od.oid}">
<tr class="warning">
<th>图片</th>
<th>商品</th>
<th>价格</th>
<th>数量</th>
<th>小计</th>
</tr>
<c:forEach var="oitem" items="${od.orderItems }">
<tr>
<td width="60" width="40%">
<input type="hidden" name="id" value="22">
<img src="${pageContext.request.contextPath}/${oitem.pro.pimage}" width="70" height="60">
</td>
<td width="30%">
<a target="_blank"> ${oitem.pro.pname}</a>
</td>
<td width="20%">
￥ ${oitem.pro.shop_price}
</td>
<td width="10%">
${oitem.count}
</td>
<td width="15%">
<span class="subtotal">￥ ${oitem.subtotal}</span>
</td>
</tr>
</c:forEach>
</table>
</td>
</tr>
</tbody>
</c:forEach>
</table>
</div>
</div>
</div>
<div style="text-align: center;">
<!-- ===###==条件判断，必须双等于“==”。否则报错。 -->
<!-- copy 【分页】-->
<ul class="pagination" style="text-align:center; margin-top:10px;">
<!-- 上一页 -->
<c:if test="${pb.pageNumber == 1 }">
<li class="disabled"><a href="# " aria-label="Previous"><span aria-hidden="true">«</span></a></li>
</c:if>
<c:if test="${pb.pageNumber > 1 }">
<li ><a href="${pageContext.request.contextPath }/OrderServlet?method=findByPage&pageNum=${pb.pageNumber - 1} " aria-label="Previous"><span aria-hidden="true">«</span></a></li>
</c:if>
<!-- 遍历 -->
<c:forEach var="current" begin="1" end="${pb.totalPage }">
<%-- 有时pb.pageNumber == current会报错：pb里没有current。最好：current == pb.pageNumber
<li <c:if test="${current == pb.pageNumber}">class="active"</c:if> >
<a href="${pageContext.request.contextPath }/OrderServlet?method=findByPage&pageNum=${current} ">${current }</a>
</li> --%>
<li <c:if test="${pb.pageNumber == current}">class="active"</c:if> >
<a href="${pageContext.request.contextPath }/OrderServlet?method=findByPage&pageNum=${current} ">${current }</a>
</li>
</c:forEach>
<!-- 下一页 -->
<c:if test="${pb.pageNumber == pb.totalPage }">
<li class="disabled">
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</c:if>
<c:if test="${pb.pageNumber < pb.totalPage }">
<li>
<a href="${pageContext.request.contextPath }/OrderServlet?method=findByPage&pageNum=${pb.pageNumber + 1} " aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</c:if>
</ul>
</div>
</div>
<div style="margin-top:50px;">
<img src="${pageContext.request.contextPath}/image/footer.jpg" width="100%" height="78" alt="我们的优势" title="我们的优势" />
</div>
<div style="text-align: center;margin-top: 5px;">
<ul class="list-inline">
<li><a>关于我们</a></li>
<li><a>联系我们</a></li>
<li><a>招贤纳士</a></li>
<li><a>法律声明</a></li>
<li><a>友情链接</a></li>
<li><a target="_blank">支付方式</a></li>
<li><a target="_blank">配送方式</a></li>
<li><a>服务声明</a></li>
<li><a>广告声明</a></li>
</ul>
</div>
<div style="text-align: center;margin-top: 5px;margin-bottom:20px;">
Copyright © 2005-2016 传智商城 版权所有
</div>
</body>
<!-- <script type="text/javascript">
function myToggle(oid){
$("#" + oid).toggle();
}
</script> -->
</html>
8674
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
