pageHelper分页插件使用以及 jsp 中数据处理（记录）

使用pageHelper 分页插件可以很简单的进行分页展示，但一段时间不知道怎么在前端对这些数据进行处理并展示

百度找了很久没有没有查到想要的结果，不断摸索终于是完成了

（记录一下）

引入jar包（jsqlparser-0.9.5.jar，pagehelper-4.1.6.jar）

在spring配置文件中配置分页器插件（前提：mybatis 配置整合到spring配置文件中）

<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

pageHelper分页插件使用以及 jsp 中数据处理（记录）

前台数据展示

<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="${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">
                                   
                                       <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>
                                       
                                       <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>
                                       
                                       <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条数据

pageHelper分页插件使用以及 jsp 中数据处理（记录）

这一次写完前端的分页，之后的分页展示都可以复用这些前端代码了（妈妈再也不用担心我的分页了！）

pageHelper分页插件使用以及 jsp 中数据处理（记录）

相关推荐