转载请注明出处：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

后台代码：

    //查询单个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.p