ssm项目---人事管理系统：分页示例

概要说明：最近做了一个ssm项目—人事管理系统

现在分享一下对User的分页查询

效果图如下：

---

代码示例

1. 首先建立一个Page类，应包含每页显示的记录数，总页数，当前页，总记录数，和一个list对象，起始位置

package com.su.util;

import java.util.List;

public class Page {
public static final int PAGESIZE = 3;  //每页显示的记录数
private Integer totalPages;     //总页数
private Integer currentPage;    //当前页
private Integer tatalNums;      //总记录数
private List list;             //list对象
private Integer firstResult;   //起始位置
public Integer getFirstResult() {
return firstResult;
    }
public void setFirstResult(Integer firstResult) {
this.firstResult = firstResult;
    }
public static int getPagesize() {
return PAGESIZE;
    }
public Integer getTotalPages() {
return totalPages;
    }
public void setTotalPages(Integer totalPages) {
this.totalPages = totalPages;
    }
public Integer getCurrentPage() {
return currentPage;
    }
public void setCurrentPage(Integer currentPage) {
this.currentPage = currentPage;
    }
public Integer getTatalNums() {
return tatalNums;
    }
public void setTatalNums(Integer tatalNums) {
this.tatalNums = tatalNums;
    }
public List getList() {
return list;
    }
public void setList(List list) {
this.list = list;
    }
}

2. 建立一个user类

package com.su.domain;

import java.util.Date;

public class User {
private Integer userId;   //id
private String loginName; //登录名
private String loginPwd;  //登录密码
private Integer userStatus;  //用户状态
private Date userCreateDate;  //创建时间
private String userName;      //用户名
public Integer getUserId() {
return userId;
    }
public void setUserId(Integer userId) {
this.userId = userId;
    }
public String getLoginName() {
return loginName;
    }
public void setLoginName(String loginName) {
this.loginName = loginName;
    }
public String getLoginPwd() {
return loginPwd;
    }
public void setLoginPwd(String loginPwd) {
this.loginPwd = loginPwd;
    }
public Integer getUserStatus() {
return userStatus;
    }
public void setUserStatus(Integer userStatus) {
this.userStatus = userStatus;
    }
public Date getUserCreateDate() {
return userCreateDate;
    }
public void setUserCreateDate(Date userCreateDate) {
this.userCreateDate = userCreateDate;
    }
public String getUserName() {
return userName;
    }
public void setUserName(String userName) {
this.userName = userName;
    }


}

3. 建立和user对应的映射文件****user.xml

在映射文件中创建sql语句。另外namespace=”user“,这里user是在mybatisconfig.xml配置文件定义了别名，当然也可以完整路径：namespace=”com.su.domain.User”

mybatisconfig.xml

<?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>
<!-- 单个类定义别名 type:类型的路径 alias:别名-->
<!-- <typeAlias type="com.mbd.domain.Student" alias="student"/> -->
<!-- 指定包名，mybatis自动扫描包中所有实体类，自动定义别名，别名就是类名（首字母大写或小写都可以）-->
<package name="com.su.domain"/>
</typeAliases>

<!-- 加载映射文件 -->
<mappers>
<mapper resource="com/su/domain/User.xml"/>
<package name="com.su.mapper"/>
</mappers>





</configuration>

user.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="user">
<!-- 根据条件查询记录数 -->
<select id="findNameCount" resultType="java.lang.Integer" parameterType="user">
        select count(*) from userTable where userName like '%${userName}%'
</select>

<!-- 查询全部用户 -->
<select id="findAllUser" resultType="user">
        select * from userTable
</select>

<!-- 根据条件分页查询 -->
<select id="findUserByPageName" parameterType="user" resultType="user">
        select * from userTable where userName like '%${userName}%'
</select>

</mapper>

4. 创建UserDao

public interface UserDao {
public Page findUserByPageName(int currentPage, User user);  //根据条件分页查询
}

*5. 创建UserDaoImpl
这个是最最最重要的代码，有了这，以后的分页就不愁了

public class UserDaoImpl extends SqlSessionDaoSupport implements UserDao {
@Override
public Page findUserByPageName(int currentPage, User user) {
        Page page = new Page();
        SqlSession sqlSession = this.getSqlSession();    //得到session
int count = sqlSession.selectOne("user.findNameCount",user);    //根据条件查询记录数
        System.out.println("******总记录数："+count);
        page.setTatalNums(count);       //总记录数
int totalPages = (page.getTatalNums() % page.PAGESIZE) == 0?
                page.getTatalNums() / page.PAGESIZE : (page.getTatalNums() / page.PAGESIZE)+1;
        System.out.println("******总页数："+totalPages);
        page.setTotalPages(totalPages);     //总页数
if(currentPage < 1 || currentPage == 0){
            currentPage = 1;
        }else if(currentPage > totalPages){
            currentPage = totalPages;
        }
        System.out.println("******当前页："+currentPage);
        page.setCurrentPage(currentPage);   //当前页
int firstResult = (currentPage-1) * page.PAGESIZE;  //起始行
        page.setFirstResult(firstResult);   

// RowBounds(offset,limit) offset起始行 ，limit是当前页显示多少条数据
        RowBounds rowBounds = new RowBounds(page.getFirstResult(), page.PAGESIZE); 

//查询记录
        List list = sqlSession.selectList("user.findUserByPageName", user,rowBounds);

        page.setList(list);

return page;
    }


}

6. 创建UserService,UserServiceImpl

public interface UserService {
public Page findUserByPageName(int currentPage, User user);  //根据条件分页查询
}

public class UserServiceImpl implements UserService {
@Autowired
private UserDao userDao;

@Override
public Page findUserByPageName(int currentPage, User user) {

return userDao.findUserByPageName(currentPage, user);
    }

}

7.这里创建控制器UserController，Jsp页面先访问控制器然后在通过控制器去调用其他的方法，最后再把结果解析由jsp页面显示

@Controller
public class UserController {

    @Autowired
private UserService userService;

    @RequestMapping("findUserByPageName.action")
public ModelAndView findUserByPageName(Integer currentPage,User user,ModelAndView mav,HttpServletRequest request){

        System.out.println("in UserController method findUserByPageName()");

if(user != null){
            System.out.println("搜索名："+user.getUserName());
        }

//检索条件，放到request中，在jsp页面回显搜索条件
        request.setAttribute("name", user.getUserName());

        Page page = userService.findUserByPageName(currentPage, user);

        System.out.println(page.getCurrentPage());

        request.setAttribute("page", page);

        mav.setViewName("jsp/user/userListTwo.jsp");

return mav;
    }

写到这，分页显示就差不多完成了最后我们来看一下jsp页面吧

8. jsp页面主要来展示页面数据

<%@ page language="java" contentType="text/html; charset=UTF-8" import="com.su.util.*"
 pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="f" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>人事管理系统 ——用户管理</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />    
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3" />
<meta http-equiv="description" content="This is my page" />
<link href="${pageContext.request.contextPath}/css/css.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/ligerUI/skins/Aqua/css/ligerui-dialog.css"/>
<link href="${pageContext.request.contextPath}/js/ligerUI/skins/ligerui-icons.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.0.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-migrate-1.2.1.js"></script>
<script src="${pageContext.request.contextPath}/js/ligerUI/js/core/base.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/ligerUI/js/plugins/ligerDrag.js" type="text/javascript"></script> 
<script src="${pageContext.request.contextPath}/js/ligerUI/js/plugins/ligerDialog.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/ligerUI/js/plugins/ligerResizable.jss" type="text/javascript"></script>
<link href="${pageContext.request.contextPath}/css/pager.css" type="text/css" rel="stylesheet" />

<script type="text/javascript">
function one(frm,num){ 
 frm.currentPage.value=num;
 frm.submit();
 }
function jump_to(frm,pageNo){
var reg=/^\d+$/;
if(!reg.test(pageNo)){
 alert("请输入正确数字");
 }else{
 one(frm,pageNo);
 }
 }



 $(function(){
/** 获取上一次选中的部门数据 */
var boxs = $("input[type='checkbox'][id^='box_']");

/** 给数据行绑定鼠标覆盖以及鼠标移开事件 */
 $("tr[id^='data_']").hover(function(){
 $(this).css("backgroundColor","#eeccff");
 },function(){
 $(this).css("backgroundColor","#ffffff");
 })


/** 删除员工绑定点击事件 */
 $("#delete").click(function(){
/** 获取到用户选中的复选框 */
var checkedBoxs = boxs.filter(":checked");
if(checkedBoxs.length < 1){
 $.ligerDialog.error("请选择一个需要删除的用户！");
 }else{
/** 得到用户选中的所有的需要删除的ids */
var ids = checkedBoxs.map(function(){
return this.value;
 })
//alert("删除："+ids.get());
 $.ligerDialog.confirm("确认要删除吗?","删除用户",function(r){
if(r){

// 发送请求
 window.location = "${pageContext.request.contextPath}/removeUser.action?ids=" + ids.get();
 }
 });
 }
 })
 })
</script>
</head>
<body>

<!-- 导航 -->

<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr><td height="10"></td></tr>
<tr>
<td width="15" height="32"><img src="${pageContext.request.contextPath}/images/main_locleft.gif" width="15" height="32"></td>
<td class="main_locbg font2"><img src="${pageContext.request.contextPath}/images/pointer.gif">&nbsp;&nbsp;&nbsp;当前位置：用户管理 &gt; 用户查询</td>
<td width="15" height="32"><img src="${pageContext.request.contextPath}/images/main_locright.gif" width="15" height="32"></td>
</tr>
</table>

<form name="empform" method="post" id="empform" action="${pageContext.request.contextPath}/findUserByPageName.action">
<table width="100%" height="90%" border="0" cellpadding="5" cellspacing="0" class="main_tabbor">
<!-- 查询区 -->
<tr valign="top">
<td height="30">
<table width="100%" border="0" cellpadding="0" cellspacing="10" class="main_tab">
<tr>
<td class="fftd">
                用户信息如下：

<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="font3">
                            用户名：<input type="text" name="userName" value="${requestScope.name }">
<input type="hidden" name="currentPage" value="1">
                            &nbsp;&nbsp;&nbsp;&nbsp;
<input type="submit" value="搜索"/>&nbsp;&nbsp;
<input id="delete" type="button" value="删除"/>
</td>
</tr>
</table>

</td>
</tr>
</table>
</td>
</tr>

<!-- 数据展示区 -->
<tr valign="top">
<td height="20">
<table width="100%" border="1" cellpadding="5" cellspacing="0" style="border:#c2c6cc 1px solid; border-collapse:collapse;">
<tr class="main_trbg_tit" align="center">
<td><input type="checkbox" name="checkAll" id="checkAll"></td>
<td>登录名</td>
<td>密码</td>
<td>用户名</td>
<td>状态</td>
<td>创建时间</td>
<td align="center">操作</td>
</tr>
<c:forEach items="${requestScope.page.list}" var="user" varStatus="stat">
<tr id="data_${stat.index}" align="center" class="main_trbg" onMouseOver="move(this);" onMouseOut="out(this);">
<td><input type="checkbox" id="box_${stat.index}" value="${user.userId}"></td>
<td>${user.loginName }</td>
<td>${user.loginPwd }</td>
<td>${user.userName }</td>
<td>${user.userStatus }</td>
<td><f:formatDate value="${user.userCreateDate}" 
type="date" dateStyle="long"/></td>
<td align="center" width="40px;"><a href="${pageContext.request.contextPath}/updateUser.action?flag=1&userId=${user.userId}">
<img title="修改" src="${pageContext.request.contextPath}/images/update.gif"/></a>
</td>
</tr>
</c:forEach>
</table>
</td>
</tr>
<!-- 分页标签 <tr valign="top"><td align="center" class="font3"></td></tr> -->
<tr valign="top"><td align="center" class="font3">



<% Page pageOne = (Page)request.getAttribute("page"); %>
<% if(pageOne!=null) {for(int i=1;i<=pageOne.getTotalPages();i++){ %>
<a href="javascript:one(document.forms[0],<%=i%>)"><font size="3px"><%=i%>&nbsp;</font></a>
<% }} %>

<br>
        搜索结果共<font style="color:red">${page.tatalNums }</font>条&nbsp;当前页${page.currentPage}/共${page.totalPages}页
<span>跳转至</span><input type="text" name="inputPage" id="inputPage" value="${page.currentPage}" style="width:30px;text-align:center;"/>页
<input type="button" onclick="javascript:jump_to(document.forms[0],document.getElementById('inputPage').value)" value="GO"/>

</td></tr>
</table>
</form>
<div style="height:10px;"></div>
</body>
</html>

分页功能显示已完成，供以后复习参考

---

Author:su1573