pageHelper分頁外掛使用以及 jsp 中資料處理(記錄)
使用pageHelper 分頁外掛可以很簡單的進行分頁展示,但一段時間不知道怎麼在前端對這些資料進行處理並展示
百度找了很久沒有沒有查到想要的結果,不斷摸索終於是完成了
(記錄一下)
引入jar包(jsqlparser-0.9.5.jar,pagehelper-4.1.6.jar)
在spring配置檔案中配置分頁器外掛(前提:mybatis 配置整合到spring配置檔案中)
<!-- 配置 pagehelper 分頁器外掛 -->
<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
<property name="dataSource" ref="dataSource"></property>
<property name="typeAliasesPackage" value="com.shopping.po"></property>
<property name="plugins">
<array>
<bean class="com.github.pagehelper.PageHelper">
<property name="properties">
<value>
dialect=mysql
reasonable=true
</value>
</property>
</bean>
</array>
</property>
</bean>
controller 程式碼
public String orderList(Model model,@RequestParam(value = "currentPage",required=false,defaultValue="1")Integer currentPage) {
//從session 中獲取userid
Integer userid = 101;List<OrderDetailProduct> list = orderService.getOrderDetailProductByUid(userid,currentPage);
PageInfo<OrderDetailProduct> page = new PageInfo<OrderDetailProduct>(list);
model.addAttribute("pageInfo", page);//測試資料
System.out.println(list);
for(int i = 0;i < list.size();i++) {
System.out.println(list.get(i));
}
return "fore_order";
}
serviceImpl 程式碼
public List<OrderDetailProduct> getOrderDetailProductByUid(Integer userid,Integer currentPage) {
//Commons.orderDetailPageNum=3
PageHelper.startPage(currentPage, Commons.orderDetailPageNum);//根據使用者id 查詢 所有訂單詳情
List<OrderDetailProduct> detailProducts = orderDetailMapper.getOrderDetailProduct(userid);
return detailProducts;
}
由於第一次使用該外掛進行分頁展示,在controller 層列印資料的時候得到的是如下的這些資料,一時間不知到如何下手,
通過PageInfo<OrderDetailProduct> page = new PageInfo<OrderDetailProduct>(list);
model.addAttribute("pageInfo", page);
將list 封裝到 pageInfo 中 向前臺返回pageInfo
前臺資料展示
<c:forEach items="${pageInfo.list }" var="p">
<tr class="order-item">
<td>
<label>
<a href="udai_order_detail.html" class="num" style="font-size:13px">
${p.createTime } <br/>訂單號: ${p.orderNum }
</a>
<div class="card">
<div class="img"><img src="${pageContext.request.contextPath}/static/fore/images/temp/${p.img }" alt="" class="cover"></div>
<div class="name ep2">${p.desc }</div>
<div class="format">顏色分類:深棕色 尺碼:均碼</div>
</div>
</label>
</td>
<td>¥${p.currentPrice }</td>
<td>${p.quantity }</td>
<td>¥${p.currentPrice*p.quantity }<br><span class="fz12 c6 text-nowrap">(含運費: ¥0.00)</span></td>
<td class="state">
<a class="but c6">等待付款</a>
<a href="udai_order_detail.html" class="but c9">訂單詳情</a>
</td>
<td class="order">
<div class="del"><a href="${pageContext.request.contextPath}/orders/delete?detailId=${p.detailId }"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a></div>
<a href="udai_shopcart_pay.html" class="but but-primary">立即付款</a>
<!-- <a href="" class="but but-link">評價</a> -->
<a href="${pageContext.request.contextPath}/orders/delete?detailId=${p.detailId }" class="but c3">取消訂單</a>
</td>
</tr>
</c:forEach>
前臺分頁器展示:
<div class="page text-right clearfix" style="margin-top: 40px">
<!-- 當前頁為第一頁時href="javascript:void(0)" 禁用 a 標籤的點選時間事件
當前頁不是第一頁時請求url 中返回currentPage=${pageInfo.pageNum - 1 } 當前頁 -1
-->
<a <c:if test="${pageInfo.pageNum != pageInfo.firstPage}">href="${pageContext.request.contextPath}/orders/list?currentPage=${pageInfo.pageNum - 1 }"</c:if>
<c:if test="${pageInfo.pageNum == pageInfo.firstPage}"> href="javascript:void(0)" class="disabled"</c:if>
>上一頁</a>
<!-- foreach 從 1 開始 到 總頁數結束 遍歷輸出 -->
<c:forEach begin="1" end="${pageInfo.pages }" varStatus="status">
<a href="${pageContext.request.contextPath}/orders/list?currentPage=${status.count }"
<c:if test="${status.count == pageInfo.pageNum}">class="select"</c:if>>${status.count }</a>
</c:forEach>
<!-- 當前頁為最後一頁時href="javascript:void(0)" 禁用 a 標籤的點選時間事件
當前頁不是最後一頁時請求url 中返回currentPage=${pageInfo.pageNum - 1 } 當前頁 -1
-->
<a <c:if test="${pageInfo.pageNum == pageInfo.lastPage}">class="disabled" href="javascript:void(0)"</c:if>
<c:if test="${pageInfo.pageNum != pageInfo.lastPage}">href="${pageContext.request.contextPath}/orders/list?currentPage=${pageInfo.pageNum + 1 }"</c:if>
>下一頁</a>
</div>
頁面效果展示:
我這裡總共有8條訂單資料,每頁展示3條資料
這一次寫完前端的分頁,之後的 分頁展示都可以複用這些前端程式碼了(媽媽再也不用擔心我的分頁了!)