1.原因
看了http://blog.csdn.net/u012728960/article/details/50791343这篇文章感觉mybatis分页插件很有用,就转子了,就自己也写了个demo方便日后查看。
2.效果图
3.maven引入和spring配置
maven
<!-- pagehelpers -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>4.1.6</version>
</dependency>
<dependency>
<groupId>com.github.jsqlparser</groupId>
<artifactId>jsqlparser</artifactId>
<version>0.9.6</version>
</dependency>
spring
<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
<property name="dataSource" ref="dataSource" />
<property name="configLocation" value="classpath:spring-mybatis.xml" />
<property name="mapperLocations" value="classpath:/com/xie/test/dao/*.xml" />
<!-- 分页插件配置 -->
<property name="plugins">
<array>
<bean class="com.github.pagehelper.PageHelper">
<property name="properties">
<value>
dialect=mysql
</value>
</property>
</bean>
</array>
</property>
</bean>
4.controller
package com.xie.test.controller;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
import com.alibaba.fastjson.JSON;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.xie.test.service.UserService;
import com.xie.test.vo.User;
@Controller
@RequestMapping("/user")
public class UserController {
@Autowired
public UserService userService;
@RequestMapping(value="/getUserList")
public ModelAndView getUserList(ModelAndView modelAndView,int pageNum){
int pageSize=2;
PageHelper.startPage(pageNum, pageSize);//当前页,页面大小
//紧跟着的第一个select方法会被分页
List<User> listUser=userService.getUser();
PageInfo<User> pageInfo=new PageInfo<User>(listUser);
modelAndView.addObject("listUser", listUser);
modelAndView.addObject("pageInfo", pageInfo);
modelAndView.setViewName("showUser");
return modelAndView;
}
}
5.service
package com.xie.test.ServiceImpl;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.xie.test.dao.IUserDao;
import com.xie.test.service.UserService;
import com.xie.test.vo.User;
@Service
public class UserServcieImpl implements UserService{
@Autowired
public IUserDao userDao;
public List<User> getUser() {
List<User> user=userDao.queryUser();
return user;
}
}
6.dao及mapper
dao
package com.xie.test.dao;
import java.util.List;
import com.xie.test.vo.User;
public interface IUserDao {
/**
* 查询全部人员
* @return
*/
List<User> queryUser();
}
mapper
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.xie.test.dao.IUserDao">
<select id="queryUser" parameterType="com.xie.test.vo.User" resultType="com.xie.test.vo.User">
select t.id as id,
t.name as name,
t.age as age,
t.grade as grade
from
user t
</select>
</mapper>
7.view(显示酷炫是因为用了bootstrap)
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>showUser</title>
</head>
<%
pageContext.setAttribute("path", request.getContextPath());
%>
<link rel="stylesheet"
href="${path }/bootstrap/css/bootstrap.min.css">
<script type="text/javascript"
src="${path }/bootstrap/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript"
src="${path }/bootstrap/js/bootstrap.min.js"></script>
<body>
<div class="cntainer">
<div class="row">
<div class="col-md-12">
<h1>人员列表</h1>
</div>
</div>
<div class="row">
<div class="col-md-12">
<table class="table table-honver">
<tr>
<th>id</th>
<th>名字</th>
<th>年龄</th>
<th>级别</th>
</tr>
<c:forEach items="${listUser}" var="emp">
<tr>
<td>${emp.id }</td>
<td>${emp.name }</td>
<td>${emp.age }</td>
<td>${emp.grade }</td>
<td><button class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-pencil"></span>增加</button></td>
<td><button class="btn btn-warning btn-sm"><span class="glyphicon glyphicon-trash"></span>删除</button></td>
</tr>
</c:forEach>
</table>
</div>
</div>
<!-- 分页 -->
<div class="row">
<div class="col-md-6">
当前${pageInfo.pageNum }页,总共${pageInfo.pages }页,总共${pageInfo.total }条记录
</div>
<div class="col-md-6">
<nav aria-lable="Page navigation">
<ul class="pagination">
<li><a href="${path }/user/getUserList.do?pageNum=1">首页</a></li>
<c:if test="${pageInfo.hasPreviousPage }">
<li>
<a href="${path }/user/getUserList.do?pageNum=${pageInfo.pageNum-1}" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
</c:if>
<c:forEach items="${pageInfo.navigatepageNums }" var="page">
<c:if test="${page==pageInfo.pageNum }">
<li class="active"><a href="${path }/user/getUserList.do?pageNum=${page}">${page}</a></li>
</c:if>
<c:if test="${page!=pageInfo.pageNum }">
<li><a href="${path }/user/getUserList.do?pageNum=${page}">${page}</a></li>
</c:if>
</c:forEach>
<c:if test="${pageInfo.hasNextPage }">
<li>
<a href="${path }/user/getUserList.do?pageNum=${pageInfo.pageNum+1 }" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</c:if>
<li><a href="${path }/user/getUserList.do?pageNum=${pageInfo.pages}">末页</a></li>
</ul>
</nav>
</div>
</div>
</div>
</body>
</html>
8.ajax+分页
onclick中的ajaxMethod方法即为调用ajax方法
//分页测试
function showPage(valueA,valueB){
var str=""
str+="<div class='row'>"+
"<div class='col-md-6'>"+
" 当前"+pageInfo.pageNum +"页,总共"+pageInfo.pages +"页,总共"+pageInfo.total+"条记录"+
"</div>"+
"<div class='col-md-6'>"+
"<nav aria-lable='Page navigation'>"+
"<ul class='pagination'>"+
"<li><a onclick='ajaxMethod(\""+valueA+"\","+valueB+","+1+")'>首页</a></li>";
if(pageInfo.hasPreviousPage){
str+="<li>"+
"<a onclick='ajaxMethod(\""+valueA+"\","+valueB+","+(pageInfo.pageNum-1)+")' aria-label='Previous'>"+
"<span aria-hidden='true'>«</span>"+
"</a>"+
"</li>";
}
for(var i=1;i<=pageInfo.navigatepageNums.length;i++){
if(i==pageInfo.pageNum){
str+="<li class='active'><a onclick='ajaxMethod("+valueA+","+valueB+","+i+")'>"+i+"</a></li>";
}
if(i!=pageInfo.pageNum){
str+="<li><a onclick='ajaxMethod(\""+valueA+"\","+valueB+","+i+")'>"+i+"</a></li>";
}
}
if(pageInfo.hasNextPage){
str+="<li>"+
"<a onclick='ajaxMethod(\""+valueA+"\","+valueB+","+(pageInfo.pageNum+1)+")' aria-label='Next'>"+
" <span aria-hidden='true'>»</span>"+
"</a></li>";
}
str+="<li><a onclick='ajaxMethod(\""+valueA+"\","+valueB+","+pageInfo.pages+")'>末页</a></li>"+
"</ul></nav></div></div>";
$("#xie").html(str);
}