分页原理
其实用easyui+mybatis分页很简单,只要你把当前页和当前页显示的数据条数传到后台查出来,返回的数据放在Map中,记住easyui的分页返回的数据时Map(rows)和Map(total),不要问我easyui为什么要返回map,以为这是easyui定死的东西。
1.创建一个web项目
2.搭建springMVC+mybatis环境
a)applicationContext-mvc.xml(springmvc配置文件)
<?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:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="
http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-3.0.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd">
<!-- 开启包自动扫描 -->
<context:component-scan base-package="com.bee.action" />
<!-- 开启注解支持 -->
<mvc:annotation-driven />
<bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/WEB-INF/" />
<property name="suffix" value=".jsp" />
</bean>
</beans>
b)appliContext.xml(spring配置文件)
<?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:p="http://www.springframework.org/schema/p"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-3.0.xsd">
<!-- 配置数据源 -->
<bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource">
<property name="driverClassName" value="com.mysql.jdbc.Driver"></property>
<property name="url" value="jdbc:mysql://127.0.0.1:3306/testmybaties"></property>
<property name="username" value="root"></property>
<property name="password" value="root"></property>
<property name="defaultAutoCommit" value="true"></property>
</bean>
<!-- 配置SqlSessionFactory,注入数据源 -->
<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
<property name="configLocation" value="classpath:configuration.xml" />
<property name="dataSource" ref="dataSource"></property>
</bean>
<!-- 配置Mapper,注入sqlSessionFactory -->
<bean id="userMapper" class="org.mybatis.spring.MapperFactoryBean">
<property name="mapperInterface" value="com.bee.dao.UserMapper"></property>
<property name="sqlSessionFactory" ref="sqlSessionFactory"></property>
</bean>
<!-- 配置Service -->
<bean id="userService" class="com.bee.service.impl.UserServiceImpl">
<property name="userMapper" ref="userMapper"></property>
</bean>
</beans>
c)configuration.xml(mybatis配置文件)
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE configuration
PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
<typeAliases>
<!-- 给实体类起别名 -->
<typeAlias type="com.bee.po.User" alias="User"/>
</typeAliases>
<!--装载Mapper -->
<mappers>
<mapper resource="com/bee/dao/UserMapper.xml" />
</mappers>
</configuration>
3 代码类实现
User.java
package com.bee.po;
public class User {
private int id;
private String name;
private String password;
private String sex;
private int age;
private String address;
@Override
public String toString() {
return "User [id=" + id + ", name=" + name + ", password=" + password
+ ", sex=" + sex + ", age=" + age + ", address=" + address
+ "]";
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getSex() {
return sex;
}
public void setSex(String sex) {
this.sex = sex;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address;
}
}
UserLoginAction.java
package com.bee.action;
import java.io.IOException;
import java.io.UnsupportedEncodingException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.bee.dao.UserMapper;
import com.bee.po.User;
import com.bee.service.UserService;
import com.datagrid.DataGridModel;
import com.page.Page;
import com.page.PageList;
@Controller
@RequestMapping("/user")
public class UserLoginAction{
@Autowired
private UserService userService;
//private UserMapper userMapper;
@RequestMapping("userList")
@ResponseBody
public Map<String, Object> userList(DataGridModel dgm) throws IOException{
//response.setContentType("application/json; charset=utf-8");
Page pager = new Page();
// 设置当前页码,对应分页中的pageNumber参数
int currentPage = (dgm.getPage() == 0) ? 1 : dgm.getPage();
// 设置每页显示条数,对应分页中的pageSize参数
int pageSize = (dgm.getRows() == 0) ? 10 : dgm.getRows();
// 每页的开始记录,第一页为1
int index = (currentPage - 1) * pageSize;
pager.setCurrentPage(currentPage);
pager.setPageSize(pageSize);
pager.setIndex(index);
PageList<User> pageList = this.userService.findUsersListByPage(currentPage, pageSize);
int total = userService.findUsersList().size();
Map<String, Object> map = new HashMap<String, Object>();
map.put("rows", pageList);
map.put("total", total);
return map;
}
}
UserMapper.java
package com.bee.dao;
import java.util.List;
import com.bee.po.User;
import com.page.PageList;
public interface UserMapper {
/****/
public List<User> findUsersList();
/****/
public PageList<User> findUsersListByPage(int start,int end);
}
UserMapper.xml
<?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.bee.dao.UserMapper">
<!-- 用户列表List -->
<resultMap type="User" id="resultListUser">
<id column="id" property="id" />
<result column="name" property="name" />
<result column="password" property="password" />
<result column="sex" property="sex" />
<result column="address" property="address" />
</resultMap>
<!-- 查找用户列表 -->
<select id="findUsersList" resultMap="resultListUser">
select * from user
</select>
<!-- 根据页数和记录数返回查找记录 -->
<select id="findUsersListByPage" resultMap="resultListUser">
select * from user limit #{0},#{1}
</select>
</mapper>
main.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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>用户信息列表</title>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/easyui/themes/color.css">
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/easyui/demo/demo.css">
<script type="text/javascript" src="<%=request.getContextPath() %>/easyui/jquery.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/easyui/jquery.easyui.min.js"></script>
<style type="text/css">
#fm{
margin:0;
padding:10px 30px;
}
.ftitle{
font-size:14px;
font-weight:bold;
padding:5px 0;
margin-bottom:10px;
border-bottom:1px solid #ccc;
}
.fitem{
margin-bottom:5px;
}
.fitem label{
display:inline-block;
width:80px;
}
.fitem input{
width:160px;
}
</style>
<script type="text/javascript">
var grid;
$(function(){
//初始化用户信息列表数据
grid = $('#dg').datagrid({
url:"<%=request.getContextPath()%>/user/userList.action",
//title : '用户信息列表',
border : false,
singleSelect : true,
fitColumns : true,
autoRowHeight : true,
loadMsg : '用户资料正在加载,请稍后 !',
striped : true,
nowrap : false,
pagination : true,
rownumbers : true,
fit : true,
resizeHandle : 'both',
pagePosition : 'bottom',
scrollbarSize : 10,
frozenColumns : [ [ {
field : 'id',
hidden : true
}, ] ],
columns : [ [ {
field : 'name',
title : '用户名',
width : 80,
align : 'center'
}, {
field : 'sex',
title : '性别',
width : 80,
align : 'center'
}, {
field : 'age',
title : '年龄',
width : 80,
align : 'center'
} ] ],
});
});
</script>
</head>
<body>
<h2>用户信息列表</h2>
<p>You can add User,or Edit_User、Delete_User if you selected an user</p>
<table id="dg"></table>
</body>
</html>