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

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

所用到的软件

• 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文件中。

<dependency>
      <groupId>com.github.pagehelper</groupId>
      <artifactId>pagehelper</artifactId>
      <version>5.1.2</version>
</dependency>

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

<property name="plugins">
            <array>
                <bean class="com.github.pagehelper.PageInterceptor">
                    <property name="properties">
                        <props>
                            <prop key="helperDialect">mysql</prop>
                            <prop key="reasonable">true</prop>
                        </props>
                    </property>
                </bean>
            </array>
        </property>

加入后SqlSessionFactory的bean如下：

 <!-- 3.配置SqlSessionFactory对象 -->
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <!-- 注入数据库连接池 -->
        <property name="dataSource" ref="dataSource"/>
        <!-- 扫描bean包 使用别名 -->
        <property name="typeAliasesPackage" value="abc.bean"></property>

        <!--配置加载映射文件 UserMapper.xml-->
        <property name="mapperLocations" value="classpath:mapper/*.xml"/>

        <property name="plugins">
            <array>
                <bean class="com.github.pagehelper.PageInterceptor">
                    <property name="properties">
                        <props>
                            <prop key="helperDialect">mysql</prop>
                            <prop key="reasonable">true</prop>
                        </props>
                    </property>
                </bean>
            </array>
        </property>


    </bean>

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

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

public List<UserInfo> 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<UserInfo> infos=userService.findAll(page,size);
            PageInfo pageInfos=new PageInfo(infos);
            ModelAndView mv = new ModelAndView();
            mv.addObject("pageInfos",pageInfos);
            mv.setViewName("user-list");
            return mv;
        }

接着在页面中展示即可

<c:forEach var="user" items="${pageInfos.list}">
		<tr>
				<td><input name="ids" type="checkbox"></td>
				<td>${user.id}</td>
				<td>${user.username}</td>
				<td>${user.password}</td>
				<td class="text-center">
				<a href="${pageContext.request.contextPath}/user/toupdate.do?id=${user.id}" class="btn bg-olive btn-xs">更新</a>
				<a href="${pageContext.request.contextPath}/user/delete.do?id=${user.id}" class="btn bg-olive btn-xs">删除</a>
				<a href="#" class="btn bg-olive btn-xs">添加角色</a>
				</td>
		</tr>
</c:forEach>

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

实现的代码如下

<div class="box-tools pull-right">
	<ul class="pagination">
		<li><a href="${pageContext.request.contextPath}/user/findAll.do?page=1&size=5" aria-label="Previous">首页</a></li>
		<li><a href="${pageContext.request.contextPath}/user/findAll.do?page=${pageInfos.pageNum-1}&size=5">上一页</a></li>
		<c:forEach begin="1" end="${pageInfos.pages}" var="pageNum">
			<li><a href="${pageContext.request.contextPath}/user/findAll.do?page=${pageNum}&size=5" >${pageNum}</a></li>
		</c:forEach>
		<li><a href="${pageContext.request.contextPath}/user/findAll.do?page=${pageInfos.pageNum+1}&size=5">下一页</a></li>
		<li><a href="${pageContext.request.contextPath}/user/findAll.do?page=${pageInfos.pages}&size=5" aria-label="Next">尾页</a></li>
	</ul>
</div>

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

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