轉載請注明出處：http://www.cnblogs.com/Joanna-Yan/p/7256105.html
前面講到Spring+SpringMVC+MyBatis深入學習及搭建(十七)——SpringMVC攔截器
本文通過MyBatis+PageHelper實現列表分頁，先上效果圖：
注意：MyBaits最低版本不能低於3.3。
PageHelper插件及依賴jar包：jsqlparser-0.9.5.jar pagehelper-4.2.1.jar
sqlMapConfig.xml中，配置PageHelper插件：
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybatis.org/dtd/mybatis-3-config.dtd"> <configuration> <!-- 全局setting配置，根據需要添加 --> <settings> <setting name="logImpl" value="LOG4J" /> </settings> <!-- 配置別名 --> <typeAliases> <package name="pojo對象所在包名"/> </typeAliases> <!-- 插件 --> <plugins> <plugin interceptor="com.github.pagehelper.PageHelper"> <!-- 4.0.0以后版本可以不設置該參數 --> <property name="diaect" value="mysql"/> <!-- 該參數默認為false 設置為true時，會將RowBounds第一個參數offset當成pageNum頁碼使用 和startPage中的pageNum效果一樣 --> <property name="offsetAsPageNum" value="true"/> <!-- 該參數默認為false 設置為true時，使用RowBounds分頁會進行count查詢 --> <property name="rowBoundsWithCount" value="true"/> <!-- 設置為true時，如果pageSize=0或者RowBounds.limit=0就會查詢出全部的結果 (相當於沒有執行分頁查詢，只是返回結果仍然是Page類型) --> <property name="pageSizeZero" value="true"/> <!-- 3.3.0版本可用-分頁參數合理化，默認false禁用 啟用合理化時，如果pageNum<1會查詢第一頁，如果pageNum>pages會查詢最后一頁 禁用合理化時，如果pageNum<1或pages會返回空數據 --> <property name="reasonable" value="true"/> <!-- 3.5.0版本可用-為了支持startPage(Object params)方法 增加了一個'params'參數來配置參數映射，用於從Map或ServletRequest中取值 可以配置pageNum,pageSize,count,pageSizeZero,reasonable,orderBy,不配置映射的用默認值 不理解該含義的前提下，不要隨便復制該配置 --> <property name="params" value="pageNum=start;pageSize=limit;"/> <!-- 支持通過Mapper接口參數來傳遞分頁參數 --> <property name="supportMethodsArguments" value="true"/> <!-- always重視返回PageInfo類型，check檢查返回類型是否為PageInfo，none返回Page --> <property name="returnPageInfo" value="check"/> </plugin> </plugins> </configuration>
后台代碼：
//查詢單個item @RequestMapping(value={"/query"}) public String query(HttpSession session,Model model,@RequestParam(required=true)Integer id,@RequestParam(required=true)Integer pageNum) throws Exception{ MaindeviceCustom maindeviceCustom=maindeviceService.findById(id); model.addAttribute("maindevice", maindeviceCustom); int roleId=(int) session.getAttribute("roleId"); RoleFunction rfListAble=roleFunctionService.find(roleId, 27); RoleFunction rfUpdateAble=roleFunctionService.find(roleId, 32); if(rfListAble!=null){ model.addAttribute("listAble", 1); int pageSize=10; Page<?> page=PageHelper.startPage(pageNum, pageSize); List<DeviceUserecordCustom> deviceUserecordCustomList=deviceUserecordService.itemRecords(id); PageInfo<?> pagehelper=page.toPageInfo(); model.addAttribute("deviceUserecordCustomList", deviceUserecordCustomList); model.addAttribute("pagehelper", pagehelper); }else{ model.addAttribute("listAble", 0); } if(rfUpdateAble!=null){ model.addAttribute("updateAble", 1); }else{ model.addAttribute("updateAble", 0); } return "devices/query_device"; }
前端代碼：
<div class="row" id="deviceRecordList"> <div class="col-lg-12" style="height: 15px;top:700px" id="paging"> <div class="panel"> <div class="panel-heading bk-bg-primary"> <h6><i class="fa fa-table red"></i><span class="break"></span>使用記錄列表</h6> <div class="panel-actions"> <a href="table.html#" class="btn-setting"><i class="fa fa-rotate-right"></i></a> <a href="table.html#" class="btn-minimize"><i class="fa fa-chevron-up"></i></a> </div> </div> <div class="panel-body" style="height: 900px;"> <div class="table-responsive"> <table class="table table-striped table-bordered bootstrap-datatable datatable"> <thead> <tr> <th>序號</th> <th>科目</th> <th>收費類型</th> <th>單價</th> <th>數量</th> <th>總金額</th> <th>開始時間</th> <th>結束時間</th> <th>結束類型</th> </tr> </thead> <tbody> <c:forEach items="${deviceUserecordCustomList }" var="deviceUserecordCustom" varStatus="status"> <tr> <td>${status.index+1 }</td> <td>${deviceUserecordCustom.courseName }</td> <td>${deviceUserecordCustom.paymenttypeName }</td> <td> <span class="label label-warning">${deviceUserecordCustom.price }</span> </td> <td>${deviceUserecordCustom.usedamount }</td> <td>${deviceUserecordCustom.monetary }</td> <td>${deviceUserecordCustom.begintimeStr }</td> <td>${deviceUserecordCustom.endtimeStr }</td> <td>${deviceUserecordCustom.endtypeName }</td> </tr> </c:forEach> </tbody> </table> <!-- 分頁 --> <div class="message"> 共<i class="blue">${pagehelper.total}</i>條記錄，當前顯示第 <i class="blue">${pagehelper.pageNum}/${pagehelper.pages}</i> 頁 </div> <div style="text-align:center;"> <ul class="pagination"> <c:if test="${!pagehelper.isFirstPage}"> <li><a href="javascript:queryDeviceRecords(${pagehelper.firstPage});">首頁</a></li> <li><a href="javascript:queryDeviceRecords(${pagehelper.prePage});">上一頁</a></li> </c:if> <c:forEach items="${pagehelper.navigatepageNums}" var="navigatepageNum"> <c:if test="${navigatepageNum==pagehelper.pageNum}"> <li class="active"><a href="javascript:queryAllDevices(${navigatepageNum});">${navigatepageNum}</a></li> </c:if> <c:if test="${navigatepageNum!=pagehelper.pageNum}"> <li><a href="javascript:queryDeviceRecords(${navigatepageNum});">${navigatepageNum}</a></li> </c:if> </c:forEach> <c:if test="${!pagehelper.isLastPage}"> <li><a href="javascript:queryDeviceRecords(${pagehelper.nextPage});">下一頁</a></li> <li><a href="javascript:queryDeviceRecords(${pagehelper.lastPage});">最后一頁</a></li> </c:if> </ul> </div> </div> </div> </div> </div> </div>
其中id="paging"，為需要局部重新加載的代碼塊。
<script type="text/javascript">
function queryDeviceRecords(pageNum) {
var id=$("#deviceId").val();
$("#paging").load("<%=basePath %>/maindevice/query.html?id="+id+"&pageNum=" + pageNum);
}
</script>
如果此文對您有幫助，微信打賞我一下吧~
