中软国际（宁波）实习第六天上午学习内容记录（主要内容：前端记录分页）

今天上午所学习和练习的内容和昨天有重复，所以这里只记录一下今天学习新东西：前端记录分页
如下图

所用到的软件

• IntelliJ IDEA 2018.2.2 x64
• jdk1.8
• apache-tomcat-7.0.94
• apache-maven-3.6.0
• Webyog-SQLyog-Ultimate12.0.8.0
• mysql-5.5.58-winx64

前提：
已经用IDEA+Maven+SSM框架实现将数据库中的记录都读取并显示到页面上。

步骤：

要实现分页首先需要引入pagehelper的jar包，即把以下内容加到项目中pom.xml文件中。

      com.github.pagehelper
      pagehelper
      5.1.2

然后在ssm_web子模块下的resources目录下的applicationContext.xml文件中加入以下内容在SqlSessionFactory的bean中

            
                
                    
                        
                            mysql
                            true
                        
                    
                
            
        

加入后SqlSessionFactory的bean如下：

 
    
        
        
        
        

        
        

        
            
                
                    
                        
                            mysql
                            true
                        
                    
                
            
        


    

接着在调用方法时，传入page和size参数到方法中，前者表示将要显示的页面序号，后者表示每页的记录数，如图

接着在Service层，执行具体代码之前使用方法Pagehelper.startPage(page,size)，page和size通过函数参数传入，如

public List findAll(int page,int size) {
        PageHelper.startPage(page,size);
        return userDao.findAll();
    }

在controller层中，用PageInfo的构造方法将查询得到的List装入Pageinfos，并将它传入新页面，如

@RequestMapping("findAll.do")
        public ModelAndView findAll(@RequestParam(defaultValue = "1") int page,@RequestParam(defaultValue = "5") int size)
        {
            List infos=userService.findAll(page,size);
            PageInfo pageInfos=new PageInfo(infos);
            ModelAndView mv = new ModelAndView();
            mv.addObject("pageInfos",pageInfos);
            mv.setViewName("user-list");
            return mv;
        }

接着在页面中展示即可

		
				
				${user.id}
				${user.username}
				${user.password}
				
				更新
				删除
				添加角色
				
		

上面的内容只展示了一页的数据，为了使所有的数据都能有机会展示，还需要实现页间跳转，如下图

实现的代码如下

	

		
首页
		
上一页
		
			
${pageNum}
		
		
下一页
		
尾页
	

在上面的代码中
实现首页的跳转：调用重新调用controller层中的findAll函数，并令传入page的值为1，即可重现打开当前页面并令分页当前页为1。
实现尾页的跳转：调用重新调用controller层中的findAll函数，并令传入page的值为page的页数，即可重现打开当前页面并令分页当前页为尾页。
实现上/下一页的跳转：调用重新调用controller层中的findAll函数，并令传入page的值为当前页的减/加一，即可重现打开当前页面并令分页当前页为之前的上/下一页。
实现指定页的跳转：调用重新调用controller层中的findAll函数，并令传入page的值为选中的选项对应的值，即可重现打开当前页面并令分页当前页指定页。

到此，记录的分页就实现了。