PageHelper查询分页
发布时间
阅读量：
阅读量
页面加载，请求ajax，查询结果分页显示（解析数据和页码）。增加模糊条件查询，同样也要分页显示。
jar包：
applicationContext-mybatis.xml:
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:aop="http://www.springframework.org/schema/aop"
xmlns:tx="http://www.springframework.org/schema/tx" xmlns:jdbc="http://www.springframework.org/schema/jdbc"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="
http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd
http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
http://www.springframework.org/schema/jdbc http://www.springframework.org/schema/jdbc/spring-jdbc-3.0.xsd
http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.0.xsd
http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-3.0.xsd
http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd">
<!-- 开启注解扫描 -->
<context:annotation-config />
<context:component-scan base-package="cn.com.how">
<context:exclude-filter type="annotation" expression="org.springframework.stereotype.Controller"/>
</context:component-scan>
<!-- 加载数据库配置文件 -->
<context:property-placeholder file-encoding="utf-8" location="classpath:config/db.properties"/>
<!-- 连接数据库的bean -->
<bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource">
<property name="driverClassName" value="${db.driver}" />
<property name="url" value="${db.url}"/>
<property name="username" value="${db.uname}"/>
<property name="password" value="${db.pwd}"/>
</bean>
<!-- 会话工厂 -->
<bean id="sqlSession" class="org.mybatis.spring.SqlSessionFactoryBean">
<!--属性1： 添加别名 -->
<property name="typeAliasesPackage" value="cn.com.how.pojo" />
<!--属性2：注入数据库连接对象 -->
<property name="dataSource" ref="dataSource"/>
<!--属性3：pojo类的xml的配置文件 -->
<property name="mapperLocations" value="classpath:cn/com/how/mapper/*.xml"/>
<!-- pageHelper配置 -->
<property name="plugins">
<array>
<bean class="com.github.pagehelper.PageInterceptor">
<property name="properties">
<!--使用下面的方式配置参数，一行配置一个 -->
<value>
</value>
</property>
</bean>
</array>
</property>
</bean>
<!-- 扫描mapper类 -->
<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
<property name="basePackage" value="cn.com.how.mapper"/>
</bean>
</beans>
list.jsp:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%
pageContext.setAttribute("ctx", request.getContextPath());
%>
<title>用户管理</title>
<script type="text/javascript" src="${ctx}/js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
to_page(1);
})
//查询信息
function to_page(pn){
$.ajax({
url:"${ctx}/ssm/listWithJson",
type:"post",
data:"pn="+pn,
dataType:"json",
success:function(result){
build_emps_table(result);
build_page_info(result);
} ,
});
}
//解析user
function build_emps_table(result){
$("#mytable tbody").empty();
$.each(result.extend.pageInfo.list,function(index,current){
var xuhao = $("<td></td>").append(index+1);
var username = $("<td></td>").append(current.username);
var userpwd = $("<td></td>").append(current.userpwd);
var usersex =$("<td></td>").append(current.usersex=='1'?"男":"女");
var userage =$("<td></td>").append(current.userage);
$("<tr></tr>").append(xuhao)
.append(username)
.append(userpwd)
.append(usersex)
.append(userage)
.appendTo("#mytable tbody");
})
}
//解析分页
function build_page_info(result){
$("#split").empty();
var pageNum = result.extend.pageInfo.pageNum;
var pages = result.extend.pageInfo.pages;
var total = result.extend.pageInfo.total;
$("#split").append("当前第"+pageNum+"页,共"+pages+"页,总"+total+"条数据").append("<br/>");
var firstPageLi = $("<a></a>").append("首页");
var prePageLi = $("<a></a>").append("上一页");
if(result.extend.pageInfo.hasPreviousPage == false){
firstPageLi.addClass("disabled");
prePageLi.addClass("disabled");
}else{
//为元素添加点击翻页的事件
firstPageLi.click(function(){
to_page(1);
});
prePageLi.click(function(){
to_page(result.extend.pageInfo.pageNum -1);
});
}
var nextPageLi = $("<a></a>").append("下一页");
var lastPageLi = $("<a></a>").append("末页");
if(result.extend.pageInfo.hasNextPage == false){
nextPageLi.addClass("disabled");
lastPageLi.addClass("disabled");
}else{
nextPageLi.click(function(){
to_page(result.extend.pageInfo.pageNum +1);
});
lastPageLi.click(function(){
to_page(result.extend.pageInfo.pages);
});
}
$("#split").append(firstPageLi).append(prePageLi)
.append(nextPageLi).append(lastPageLi);
}
function search(pn){
var str = $("#search").serialize();
$.ajax({
url:"${ctx}/ssm/search",
type:"post",
data:"pn="+pn+"&"+str,
success:function(result){
//alert(1);
build_emps_table2(result);
build_page_info2(result);
},
});
}
function build_emps_table2(result){
$("#mytable tbody").empty();
$.each(result.extend.pageInfo.list,function(index,current){
var xuhao = $("<td></td>").append(index+1);
var username = $("<td></td>").append(current.username);
var userpwd = $("<td></td>").append(current.userpwd);
var usersex =$("<td></td>").append(current.usersex=='1'?"男":"女");
var userage =$("<td></td>").append(current.userage);
$("<tr></tr>").append(xuhao)
.append(username)
.append(userpwd)
.append(usersex)
.append(userage)
.appendTo("#mytable tbody");
});
}
function build_page_info2(result){
$("#split").empty();
var pageNum = result.extend.pageInfo.pageNum;
var pages = result.extend.pageInfo.pages;
var total = result.extend.pageInfo.total;
$("#split").append("当前第"+pageNum+"页,共"+pages+"页,总"+total+"条数据").append("<br/>");
var firstPageLi = $("<a></a>").append("首页");
var prePageLi = $("<a></a>").append("上一页");
if(result.extend.pageInfo.hasPreviousPage == false){
firstPageLi.addClass("disabled");
prePageLi.addClass("disabled");
}else{
//为元素添加点击翻页的事件
firstPageLi.click(function(){
search(1);
});
prePageLi.click(function(){
search(result.extend.pageInfo.pageNum -1);
});
}
var nextPageLi = $("<a></a>").append("下一页");
var lastPageLi = $("<a></a>").append("末页");
if(result.extend.pageInfo.hasNextPage == false){
nextPageLi.addClass("disabled");
lastPageLi.addClass("disabled");
}else{
nextPageLi.click(function(){
search(result.extend.pageInfo.pageNum +1);
});
lastPageLi.click(function(){
search(result.extend.pageInfo.pages);
});
}
$("#split").append(firstPageLi).append(prePageLi)
.append(nextPageLi).append(lastPageLi);
}
</script>
</head>
<body>
<div style="width:500px;margin:0px auto;text-align:center">
<form id="search" >
账号:<input type="text" name="username" placeholder="请输入字段"><br>
密码:<input type="text" name="userpwd" placeholder="请输入字段"><br>
<input type="button" value="搜索" onclick="search(1)">
</form>
<table align='center' border='1' cellspacing='0' id="mytable">
<thead>
<tr>
<!-- <td>USERID</td> -->
<td>序号</td>
<td>账号</td>
<td>密码</td>
<td>性别</td>
<td>年龄</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div style="text-align:center" id="split">
</div>
</div>
</body>
</html>
ajax返回的通用bean：
public class Msg {
// 状态码 100-成功 200-失败
private int code;
// 提示信息
private String msg;
//用户返回给浏览器的数据
private Map<String,Object> extend = new HashMap<String, Object>();
//处理成功
public static Msg success() {
Msg result = new Msg();
result.setCode(100);
result.setMsg("处理成功！");
return result;
}
//处理失败
public static Msg fail() {
Msg result =new Msg();
result.setCode(200);
result.setMsg("处理失败");
return result;
}
//链式操作
public Msg add(String key,Object value) {
this.getExtend().put(key, value);
return this;
}
public int getCode() {
return code;
}
public void setCode(int code) {
this.code = code;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public Map<String, Object> getExtend() {
return extend;
}
public void setExtend(Map<String, Object> extend) {
this.extend = extend;
}
}
controller方法：
@RequestMapping("/listWithJson")
@ResponseBody
public Msg listWithJson(@RequestParam(value="pn",defaultValue="1") Integer pn) {
PageHelper.startPage(pn,2);
List<User> list = userService.list();
PageInfo pageInfo = new PageInfo(list);
return Msg.success().add("pageInfo", pageInfo);
}
@RequestMapping("/search")
@ResponseBody
public Msg search(@RequestParam(value="pn",defaultValue="1") Integer pn,
User user) {
PageHelper.startPage(pn, 2);
List<User> list = userService.searchUser(user);
System.out.println("有"+list+"个");
PageInfo pageInfo = new PageInfo(list);
return Msg.success().add("pageInfo", pageInfo);
}
返回到页面：
@RequestMapping("/userList3")
public String userList3(@RequestParam(value="pn",defaultValue="1") Integer pn,
Model model)
{
PageHelper.startPage(pn, 2);
List<User> list = userService.list();
PageInfo page = new PageInfo(list);
model.addAttribute("pageInfo", page);
return "userList";
}
PageInfo page = new PageInfo(emps,5);分页条
//解析显示分页条，点击分页要能去下一页....
function build_page_nav(result){
//page_nav_area
$("#page_nav_area").empty();
var ul = $("<ul></ul>").addClass("pagination");
//构建元素
var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
var prePageLi = $("<li></li>").append($("<a></a>").append("«"));
if(result.extend.pageInfo.hasPreviousPage == false){
firstPageLi.addClass("disabled");
prePageLi.addClass("disabled");
}else{
//为元素添加点击翻页的事件
firstPageLi.click(function(){
to_page(1);
});
prePageLi.click(function(){
to_page(result.extend.pageInfo.pageNum -1);
});
}
var nextPageLi = $("<li></li>").append($("<a></a>").append("»"));
var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
if(result.extend.pageInfo.hasNextPage == false){
nextPageLi.addClass("disabled");
lastPageLi.addClass("disabled");
}else{
nextPageLi.click(function(){
to_page(result.extend.pageInfo.pageNum +1);
});
lastPageLi.click(function(){
to_page(result.extend.pageInfo.pages);
});
}
//添加首页和前一页 的提示
ul.append(firstPageLi).append(prePageLi);
//1,2，3遍历给ul中添加页码提示
$.each(result.extend.pageInfo.navigatepageNums,function(index,item){
var numLi = $("<li></li>").append($("<a></a>").append(item));
if(result.extend.pageInfo.pageNum == item){
numLi.addClass("active");
}
numLi.click(function(){
to_page(item);
});
ul.append(numLi);
});
//添加下一页和末页 的提示
ul.append(nextPageLi).append(lastPageLi);
//把ul加入到nav
var navEle = $("<nav></nav>").append(ul);
navEle.appendTo("#page_nav_area");
}
<select id="searchUser" resultType="user" parameterType="user">
select * from users
<where>
<if test="username!=null and username!=''">
and username like concat('%',#{username},'%')
</if>
<if test="userpwd!=null and userpwd!=''">
and userpwd like concat('%',#{userpwd},'%')
</if>
</where>
</select>
全部评论 (0)
还没有任何评论哟~