pageHelper实现分页显示功能

pageHelper实现分页显示功能

1.加载jar包

<!--pom.xml-->
<dependency>
  <groupId>com.github.pagehelper</groupId>
  <artifactId>pagehelper</artifactId>
  <version>5.1.2</version>
</dependency>

2.添加配置

在applicationContext.xml中的properties中添加以下配置

<!--分页所加-->
<property name="plugins">
    <array>
        <bean class="com.github.pagehelper.PageInterceptor">
            <property name="properties">
                <props>
                    <prop key="helperDialect">mysql</prop>
                    <prop key="reasonable">true</prop>
                </props>
            </property>
        </bean>
    </array>
</property>
<!---->

3.在列表展示处添加pageHelper配置

//UserInfoServiceImpl.java
@Override
public List<UserInfo> findAll(int page, int size){
    PageHelper.startPage(page,size);
    //userInfoDao是数据库操作文件，findAll获取查询结果
    return userInfoDao.findAll();
}

//UserInfoServiceController.java
@RequestMapping("/findAll.do")
public ModelAndView findAll(@RequestParam(defaultValue = "1") int page, @RequestParam(defaultValue = "5") int size) {
    ModelAndView mv = new ModelAndView();
    List<UserInfo> userInfos = userInfoService.findAll(page, size);
    //把需要展示的信息传入pageInfo以分页展示
    PageInfo pageInfo = new PageInfo(userInfos);
    mv.addObject("pageInfo", pageInfo);
    mv.setViewName("user-list");
    return mv;
}

<!-- 正文区域 -->
<section class="content"> <!-- .box-body -->
<div class="box box-primary">
   <div class="box-header with-border">
      <h3 class="box-title">列表</h3>
   </div>

   <div class="box-body">

      <!-- 数据表格 -->
      <div class="table-box">

         <!--工具栏-->
         <div class="pull-left">
            <div class="form-group form-inline">
               <div class="btn-group">
                  <button type="button" class="btn btn-default" title="新建"
                        onclick="location.href='${pageContext.request.contextPath}/pages/user-add.jsp'" >
                     <i class="fa fa-file-o"></i> 新建
                  </button>
                  <!--0718批量删除-->
                  <button type="button" class="btn btn-default" title="删除" onclick="deleteAll()">

                     <i class="fa fa-refresh"></i> 删除
                  </button>
               </div>
            </div>
         </div>
         <form action="#"
              method="post">
            <div class="col-md-4 data1">
               <input type="text" class="form-control" name="username"
                     placeholder="username" value="">
            </div>
            <button type="submit" class="btn bg-maroon">搜索</button>
         </form>
         <!--工具栏/-->

         <!--数据列表-->
         <table id="dataList"
            class="table table-bordered table-striped table-hover dataTable">
            <thead>
               <tr>
                  <th class="" style="padding-right: 0px"><input
                     id="selall" type="checkbox" class="icheckbox_square-blue">
                  </th>
                  <th class="sorting_asc">ID</th>
                  <th class="sorting_desc">用户名</th>
                  <th class="sorting_asc sorting_asc_disabled">密码</th>
                  <th class="text-center">操作</th>
               </tr>
            </thead>
            <tbody>
            			<!--------传入的pageInfo在此处----------->
                <c:forEach var="userInfo" items="${pageInfo.list}">
                  <tr>
                     <td><input name="ids" type="checkbox" value="${userInfo.id}"></td>
                     <td>${userInfo.id}</td>
                     <td>${userInfo.username}</td>
                     <td>${userInfo.password}</td>
                     <td class="text-center">
                        <a href="${pageContext.request.contextPath}/user/toUpdate.do?id=${userInfo.id}" class="btn bg-olive btn-xs">更新</a>
                        <a href="${pageContext.request.contextPath}/user/delete.do?id=${userInfo.id}" class="btn bg-olive btn-xs">删除</a>
                        <a href="#" class="btn bg-olive btn-xs">添加角色</a>
                     </td>
                  </tr>
               </c:forEach>
            </tbody>
            <!--
                        <tfoot>
                        <tr>
                        <th>Rendering engine</th>
                        <th>Browser</th>
                        <th>Platform(s)</th>
                        <th>Engine version</th>
                        <th>CSS grade</th>
                        </tr>
                        </tfoot>-->
         </table>
         <!--数据列表/-->

      </div>
      <!-- 数据表格 /-->

   </div>
   <!-- /.box-body -->
   	<!------------页面跳转在此处------------->
      <div class="box-tools pull-right">
         <ul class="pagination">
            <li><a href="${pageContext.request.contextPath}/user/findAll.do?page=1&size=5" aria-label="Previous">首页</a></li>
            <li><a href="${pageContext.request.contextPath}/user/findAll.do?page=${pageInfo.pageNum-1}&size=5">上一页</a></li>
            <c:forEach begin="1" end="${pageInfo.pages}" var="pageNumber">
               <li><a href="${pageContext.request.contextPath}/user/findAll.do?page=${pageNumber}&size=5">${pageNumber}</a></li>
            </c:forEach>

            <li><a href="${pageContext.request.contextPath}/user/findAll.do?page=${pageInfo.pageNum+1}&size=5">下一页</a></li>
            <li><a href="${pageContext.request.contextPath}/user/findAll.do?page=${pageInfo.pages}&size=5" aria-label="Next">尾页</a></li>
         </ul>
      </div>
   </div>
   <!-- /.box-footer-->
</section>
</div>

</section>
<!-- 正文区域 /-->

css样式文件太多了，没有沾

4.效果展示