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

g 同时被 2 个专栏收录
2 篇文章 0 订阅
1 篇文章 0 订阅

使用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条数据

 

 

这一次写完前端的分页,之后的 分页展示都可以复用这些前端代码了(妈妈再也不用担心我的分页了!)

  • 4
    点赞
  • 3
    评论
  • 8
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

评论3
请先登录 后发表评论~
©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页

打赏作者

Allenonlywork

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值