pagehelper实现分页(ajax)

1.maven配置分页插件<！ - 分页插件 - > <dependency> <groupId> com.github.pagehelper </ groupId> <artifactId> pagehelper </ artifactId> <version> 3.4.2 </ version> </ dependency>2.Constant中设置常量，每页要显示的记录数public static int PAGESIZE = 5;3.mapper接口和映射文件/** * 查询全部学生或者根据姓名和班级查询 * @param student 学生对象 * @return 查询到的学生列表 */ List<Student> getStus(Student student);4.service接口和实体类

【注意】startPage方法之后要紧跟进行分页的SQL语句@Override public List<Student> getStus(int pageIndex, int pageSize, Student student) { /** * 1.进行分页处理 * 2.显示第pageIndex页的pageSize条数据 * 3.在查询之前执行PageHelper的startPage方法之后紧跟要进行分页的查询语句 */ PageHelper.startPage(pageIndex,pageSize); List<Student> lists = studentMapper.getStus(student); return lists; }5.handler

【注意】

• 入参：pageIndex
• pageIndex的设置
• pageInfo用来保存数据
• modelAndView

@RequestMapping("/getStus.do")
@ResponseBody
public ModelAndView getStus(@RequestParam(required = false) Integer pageIndex,@RequestParam(required = false) String querystuName,@RequestParam(required = false) Integer gradeId,HttpServletRequest request){
//student对象用来存放实现动态查询的条件
Student student = new Student();
student.setStuName(querystuName);
student.setStuGradeId(gradeId);
/**
* 【pageIndex1】 要查询第几页
* 如果没有传入pageIndex则查询第一页，否则查询当前要查询的页数
*/
int pageIndex1 = pageIndex==null?1:pageIndex;
//执行查询
List<Student> stuslist = studentService.getStus(pageIndex1,Constant.PAGESIZE,student);
//【pageInfo】用来保存分页查询之后的信息，可以获取总记录数   【stuslist】service层返回的结果
PageInfo<Student> pageInfo= new PageInfo<Student>(stuslist);
//把分页查询得到的信息保存并且返回一个HTML页面（data.jsp），实现Ajax分页
ModelAndView modelAndView = new ModelAndView("data");
modelAndView.addObject("pageInfo",pageInfo);
return modelAndView;
}

6.js//窗体加载时 $(function () { nav(1);//调用分页查询的方法 }); //分页显示数据 function nav(index) { /** * 1.【$("#frmSeach").serialize()】 序列化表单 * 2.【pageIndex】 传入当前要显示的页数 */ var data = $("#frmSeach").serialize()+"&pageIndex="+index; $.ajax({ url:"/getStus.do", type:"post", data:data, dataType:"html", //【注意返回的数据类型为：html】 success:function (data) { $("#tabData").html(data);//handler返回的内容显示在页面中 } }); }7.jsp  —— 显示结果

• pageInfo：保存了分页查询之后的所有数据，包括对象列表信息，总记录数，当前页数等
• pageInfo.getList() ：得到执行查询之后的对象的信息
• formatDate：格式化日期

  <c:forEach items="${pageInfo.getList()}" var="info" varStatus="statu">
  <tr <c:if test="${statu.count%2==0}">style="background-color: #5bc0de" </c:if>>
  <td>${statu.count}</td>
  <td>${info.stuId}</td>
  <td>${info.stuName}</td>
  <td>${info.stuSex}</td>
  <td><fmt:formatDate value="${info.stuBirthday}" pattern="yyyy年MM月dd日"></fmt:formatDate>
  </td>
  <td>${info.gradeName}</td>
  <td><img src="statics/uploadfiles/${info.stuPic}"  width="25px" height="25px"></td>
  <td>
  <a href="javascript:;" class="btn btn-default" data-toggle="modal" data-target="#exampleModal"  data-whatever="${Student.stuId}">修改</a>
  <a href="javascript:;" onclick="delStu(${Student.stuId})" class="btn btn-default">删除</a>
  </td>
  </tr>
  </c:forEach>

8.jsp  —— 【处理页码】

• href="javascript:;" 
• onclick =“nav（param）”: js中调用nav方法  参数为当前显示第几页
• pageInfo.pageNum：当前的pageInfo中是第几页
• pageInfo.pages：根据总记录数和每页要显示的记录数得到的【总页数】

  <div class="row">
  <div class="col-md-6">
  <nav aria-label="Page navigation">
  <ul class="pagination">
  <li><a href="javascript:;"  onclick="nav(1)">首页</a></li>
  <c:if test="${pageInfo.pageNum!=1}">
  <li> <a href="javascript:;" onclick="nav(${pageInfo.pageNum-1})">上一页</a></li>
  </c:if>
  <c:forEach begin="1" end="${pageInfo.pages}" varStatus="statu">
  <li> <a  href="javascript:;" onclick="nav(${statu.count})">${statu.count}</a></li>
  </c:forEach>
  <c:if test="${pageInfo.pageNum!=pageInfo.pages}">
  <li> <a href="javascript:;" onclick="nav(${pageInfo.pageNum+1})">下一页</a></li>
  </c:if>
  <li><a href="javascript:;" onclick="nav(${pageInfo.pages})">尾页</a></li>
  </ul>
  </nav>
  </div>
  <div class ="col-md-2">
  第 ${pageInfo.pageNum}页 / 共  ${pageInfo.pages}页
  </div>
  </div>