SSM整合分页

电玩女神 2024-04-17 05:54 7阅读 0赞

分页  
**1.准备**  
1.1 BasePage类  便于封装分页数据

//分页工具类
    public class BasePage { 
    
    	//当前页
    	private Integer currentPage = 0;
    	
    	//每页显示的条数
    	private Integer pageSize = 5;
    
    	public Integer getCurrentPage() { 
    		return currentPage;
    	}
    
    	public void setCurrentPage(Integer currentPage) { 
    		this.currentPage = currentPage;
    	}
    
    	public Integer getPageSize() { 
    		return pageSize;
    	}
    
    	public void setPageSize(Integer pageSize) { 
    		this.pageSize = pageSize;
    	}

创建UserDto,并需要继承PageInfo类

public class UserDto extends PageInfo<User>

1.2 前端分页栏  放在webapp文件夹下

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
     <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
     <div>
            共有${ pageModel.total }条记录，共${ pageModel.pages }页，每页
          <select name="pageSize" onchange="changePageSize(this.value)" style="width: 50px;">
              <option value="10" ${ pageModel.pageSize==10?"selected":"" }>10</option>
              <option value="20"  ${ pageModel.pageSize==20?"selected":"" }>20</option>
              <option value="50"  ${ pageModel.pageSize==50?"selected":"" }>50</option>
              <option value="100"   ${ pageModel.pageSize==100?"selected":"" }>100</option>
          </select>  
            条记录，当前${ pageModel.pageNum }/${ pageModel.pages }页，
        <a href="javascript:homePage()">首页</a>|
        <a href="javascript:frontPage()">上一页</a>|
        <a href="javascript:nextPage()">下一页</a>|
        <a href="javascript:lastPage()">尾页</a>|
        转到<select name="pageNum" onchange="goPage(this.value)" style="width: 50px;">
           <c:forEach begin="1" end="${pageModel.pages }" var="i">
              <option value=${ i }  ${ pageModel.pageNum==i?"selected":"" }>${ i }</option>
           </c:forEach>
        </select>
       </div>
       
       
        <script type="text/javascript">
           function homePage(){ 
               document.getElementById("pageNum").value=1;
               document.getElementById("pager").submit();//表单提交
               
           }
           function frontPage(){ 
               document.getElementById("pageNum").value=${ pageModel.pageNum<=1? 1 : pageModel.pageNum-1 };
               document.getElementById("pager").submit();//表单提交
           }
           function nextPage(){ 
               document.getElementById("pageNum").value=${ pageModel.pageNum>=pageModel.pages?pageModel.pages:pageModel.pageNum+1 };
               document.getElementById("pager").submit();//表单提交
           }
           function lastPage(){ 
               document.getElementById("pageNum").value=${ pageModel.pages };
               document.getElementById("pager").submit();//表单提交
           }
           function goPage(cur_page){ 
               document.getElementById("pageNum").value=cur_page;
               document.getElementById("pager").submit();//表单提交
           }
           function changePageSize(cur_pageSize){ 
               document.getElementById("pageSize").value=cur_pageSize;
               document.getElementById("pager").submit();//表单提交
           }
        </script>

1.3  前端页面

**2.后端请求实现**  
后端分页通过mybatis的分页插件PageHelper来实现,需要在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>
    
        <plugins>
            
            <plugin interceptor="com.github.pagehelper.PageHelper">
                <property name="dialect" value="mysql" />
                
                
                
                <property name="offsetAsPageNum" value="true" />
                
                
                <property name="rowBoundsWithCount" value="true" />
                
                
                <property name="pageSizeZero" value="true" />
                
                
                
                <property name="reasonable" value="false" />
                
                
                
                
                <property name="params" value="pageNum=start;pageSize=limit;" />
                
                <property name="returnPageInfo" value="check" />
            </plugin>
        </plugins>
     
    </configuration>

3.1  控制器

@Autowired		
    	private IUserService userService;
    	
    //分页查询用户信息 当期页 每页显示的条数
    	@RequestMapping("/queryPage")
    	public String queryPage(UserDto dto,Model m){ 
    		//默认值
    		if(dto != null){ 
    			if( dto.getPageNum() == 0 && dto.getPageSize() == 0){ 
    				dto.setPageNum(1);
    				dto.setPageSize(5);
    			}
    		}
    		PageInfo<User> info = userService.queryPage(dto);
    		m.addAttribute("pageModel",info);
    		return "user/user";//该处在视图解析器中,省略了 .jsp
    	}

3.2 Service层实现

//分页带条件查询用户信息
    	PageInfo<User> queryPage(UserDto dto);

@Override
    	public PageInfo<User> queryPage(UserDto dto) { 
    		//设置分页的信息
    		PageHelper.startPage(dto.getPageNum(),dto.getPageSize());
    		List<User> list = this.query(dto.getUser());
    		PageInfo<User> pageInfo = new PageInfo<User>(list);
    		return pageInfo;
    	}
    	
    @Override
    	//查询用户信息
    	public List<User> query(User user) { 
    		UserExample example = new UserExample();
    		if(user != null){ 
    			Criteria criteria = example.createCriteria();
    			if(StringUtils.isNotEmpty(user.getUserName())){ 
    				//根据账号查询
    				criteria.andUserNameEqualTo(user.getUserName());
    			}
    		}
    		return userMapper.selectByExample(example);
    	}

3.3  Dao层实现

List<User> selectByExample(UserExample example);

<select id="selectByExample" parameterType="com.i.pojo.UserExample" resultMap="BaseResultMap">
        select
        <if test="distinct">
          distinct
        </if>
        <include refid="Base_Column_List" />
        from t_user
        <if test="_parameter != null">
          <include refid="Example_Where_Clause" />
        </if>
        <if test="orderByClause != null">
          order by ${orderByClause}
        </if>
      </select>

**4.测试**  
注意修改前端界面中获取数据的方式

<c:forEach items="${pageModel.list}" var="user">
    	        <tr>
    		        <td><input name="" type="checkbox" value="" /></td>
    		        <td>${user.userId}</td>
    		        <td>${user.userName}</td>
    		        <td>${user.realName}</td>
    		        <td>${user.email}</td>
    		        <td>${user.phone}</td>
    		        <td><a href="/user/getAddOrUpdateInfo?userId=${user.userId}" class="tablelink">修改</a>     
    		        	<a href="javascript:void(0)" οnclick="deleteUser(${user.userId})" class="tablelink"> 删除</a></td>
    	        </tr> 
    </c:forEach>