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

 

 

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

/* * @(#)PageControl.java 1.00 2004-9-22 * * Copyright 2004 2004 . All rights reserved. * PROPRIETARY/CONFIDENTIAL. Use is subject to license terms. */ package com.hexiang.utils; /** * PageControl, 分页控制, 可以判断总页数和是否有上下页. * * 2008-07-22 加入输出上下分页HTML代码功能 * * @author HX * @version 1.1 2008-9-22 */ public class PageBean { /** 每页显示记录数 */ private int pageCount; /** 是否有上一页 */ private boolean hasPrevPage; /** 记录总数 */ private int recordCount; /** 是否有下一页 */ private boolean hasNextPage; /**总页面数 */ private int totalPage; /** 当前页码数 */ private int currentPage; /** * 分页前的页面地址 */ private String pageUrl; /** * 输出分页 HTML 页面跳转代码, 分链接和静态文字两种. * 2008-07-22 * @return HTML 代码 */ public String getPageJumpLinkHtml() { if(StringUtil.isEmpty(pageUrl)) { return ""; } // 检查是否有参数符号, 没有就加上一个? if(pageUrl.indexOf('?') == -1) { pageUrl = pageUrl + '?'; } StringBuffer buff = new StringBuffer("<span id='pageText'>"); // 上一页翻页标记 if(currentPage > 1) { buff.append("[ <a href='" + pageUrl + "&page=" + (currentPage - 1) + "' title='转到第 " + (currentPage - 1) + " 页'>上一页</a> ] "); } else { buff.append("[ 上一页 ] "); } // 下一页翻页标记 if(currentPage < getTotalPage()) { buff.append("[ <a href='" + pageUrl + "&page=" + (currentPage + 1)+ "' title='转到第 " + (currentPage + 1) + " 页'>下一页</a> ] "); } else { buff.append("[ 下一页 ] "); } buff.append("</span>"); return buff.toString(); } /** * 输出页码信息: 第${currentPage}页/共${totalPage}页 * @return */ public String getPageCountHtml() { return "第" + currentPage + "页/共" + getTotalPage() + "页"; } /** * 输出 JavaScript 跳转函数代码 * @return */ public String getJavaScriptJumpCode() { if(StringUtil.isEmpty(pageUrl)) { return ""; } // 检查是否有参数符号, 没有就加上一个? if(pageUrl.indexOf("?") == -1) { pageUrl = pageUrl + '?'; } return "<script>" + "// 页面跳转函数\n" + "// 参数: 包含页码的表单元素,例如输入框,下拉框等\n" + "function jumpPage(input) {\n" + " // 页码相同就不做跳转\n" + " if(input.value == " + currentPage + ") {" + " return;\n" + " }" + " var newUrl = '" + pageUrl + "&page=' + input.value;\n" + " document.location = newUrl;\n" + " }\n" + " </script>"; } /** * 输出页面跳转的选择框和输入框. 示例输出: * <pre> 转到 <!-- 输出 HTML SELECT 元素, 并选中当前页面编码 --> <select onchange='jumpPage(this);'> <c:forEach var="i" begin="1" end="${totalPage}"> <option value="${i}" <c:if test="${currentPage == i}"> selected </c:if> >第${i}页</option> </c:forEach> </select> 输入页码:<input type="text" value="${currentPage}" id="jumpPageBox" size="3"> <input type="button" value="跳转" onclick="jumpPage(document.getElementById('jumpPageBox'))"> </pre> * @return */ public String getPageFormJumpHtml() { String s = "转到\n" + "\t <!-- 输出 HTML SELECT 元素, 并选中当前页面编码 -->\n" + " <select onchange='jumpPage(this);'>\n" + " \n"; for(int i = 1; i <= getTotalPage(); i++ ) { s += "<option value=" + i + "\n"; if(currentPage == i) { s+= " selected "; } s += "\t>第" + i + "页</option>\n"; } s+= " </select>\n" + " 输入页码:<input type=\"text\" value=\"" + currentPage + "\" id=\"jumpPageBox\" size=\"3\"> \n" + " <input type=\"button\" value=\"跳转\" onclick=\"jumpPage(document.getElementById('jumpPageBox'))\"> "; return s; } /** * 进行分页计算. */ private void calculate() { if (getPageCount() == 0) { setPageCount(1); } totalPage = (int) Math.ceil(1.0 * getRecordCount() / getPageCount()); // 总页面数 if (totalPage == 0) totalPage = 1; // Check current page range, 2006-08-03 if(currentPage > totalPage) { currentPage = totalPage; } // System.out.println("currentPage=" + currentPage); // System.out.println("maxPage=" + maxPage); // // Fixed logic error at 2004-09-25 hasNextPage = currentPage < totalPage; hasPrevPage = currentPage > 1; return; } /** * @return Returns the 最大页面数. */ public int getTotalPage() { calculate(); return totalPage; } /** * @param currentPage * The 最大页面数 to set. */ @SuppressWarnings("unused") private void setTotalPage(int maxPage) { this.totalPage = maxPage; } /** * 是否有上一页数据 */ public boolean hasPrevPage() { calculate(); return hasPrevPage; } /** * 是否有下一页数据 */ public boolean hasNextPage() { calculate(); return hasNextPage; } // Test public static void main(String[] args) { PageBean pc = new PageBean(); pc.setCurrentPage(2); pc.setPageCount(4); pc.setRecordCount(5); pc.setPageUrl("product/list.do"); System.out.println("当前页 " + pc.getCurrentPage()); System.out.println("有上一页 " + pc.hasPrevPage()); System.out.println("有下一页 " + pc.hasNextPage()); System.out.println("总页面数 " + pc.getTotalPage()); System.out.println("分页 HTML 代码 " + pc.getPageJumpLinkHtml()); } /** * @return Returns the 当前页码数. */ public int getCurrentPage() { return currentPage; } /** * 设置当前页码, 从 1 开始. * @param currentPage * The 当前页码数 to set. */ public void setCurrentPage(int currentPage) { if (currentPage <= 0) { currentPage = 1; } this.currentPage = currentPage; } /** * @return Returns the recordCount. */ public int getRecordCount() { return recordCount; } /** * @param recordCount * The recordCount to set. */ public void setRecordCount(int property1) { this.recordCount = property1; } /** * @return Returns the 每页显示记录数. */ public int getPageCount() { return pageCount; } /** * @param pageCount * The 每页显示记录数 to set. */ public void setPageCount(int pageCount) { this.pageCount = pageCount; } public String getPageUrl() { return pageUrl; } public void setPageUrl(String value) { pageUrl = value; } }
JspPageControlor分页插件使用说明<br>1、次插件数据库查询和分页操作分离开,在查询的时候,不管采用什么设计模式,都必须实现<br>PageListener接口。<br>2、接口里面包含四个方法<br>(1)、public List doSelect(int recordStart,int sizePage),参数recordStart表示从第几条<br>记录开始查询。参数sizePage表示一次查几条记录。返回一个list对象(该list对象可以是<br>一个记录集,也可以是一个POJO类对象)<br>(2)、public int getCount(),查询该表中的记录总数,返回一个int对象。<br>(3)、public void close(),放置所有关闭操作的方法。<br>3、调用页面,必须添加PageListener监听器,即实现addPageListener(Object)方法,参数为操作<br>数据库类的对象。<br>4、用getRecord()方法获取存有记录的list对象;<br>用getFirstPage()方法获取'首页'的标记;<br>用getPageUp()方法获取'上一页'的标记;<br>用getPageDown()方法获取'下一页'的标记;<br>用getLastPage()方法获取'末页'的标记;<br>用getPageForward()方法获取'跳转到第几页'的输入框标记;<br>用getCountRecord()方法获取总记录数;<br>用getCountPage()方法获取总页数;<br>用getCurrentPage()方法获取当前页数;<br>5、如果需要把上一页,下一页等标记换成图片,则只需调用<br>setPageDown('图片路径+图片名'),<br>setPageUp('图片路径+图片名'),<br>setFirstPage('图片路径+图片名'),<br>setLastPage('图片路径+图片名');<br>详细操作请查看帮助文档和具体实现案例;<br><br>PageControlor分页插件(插件仅支持jsp)<br>包含3个文件:<br>PageControlor分页插件;<br>分页的帮助文档;<br>分页插件使用案例;<br><br>运行使用具体案例时,须注意以下几点:<br>1、运行环境为jdk(1.4以上),Tomcat(5.0以上),mysql(5.0.x);<br>2、运行时须改动init.properties,把数据库名,用户名和密码改称自己数据库的设置;<br>3、将news.sql文件导入到您的mysql服务器里面。<br><br>开发者:千里web架构实验室成员--刘捷<br>2007年10月29日 <br>
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值