Jsp分页功能

  分页功能是java web项目中非常常见又非常重要的的一个功能。数据库中的数据成千上万，不可能把这么多的数据一次显示在浏览器上面。一是数据库一下查出那么多数据肯定会影响性能，二是把这么多数据一下展示在前台页面也看不过来吧。如果说要把全部数据查出来做缓存，前台再用js操作这种情况不再本次讨论范围。其实分页查询主要是两个参数:一是页数pageNum，二是行数pageSize，下面我一项目里的分页实现，仅作参考。

后端代码

我这里后端是使用的Mybatis框架,用了Mybatis分页插件，不需要在多写其它分页sql，比较方便。

maven依赖

<dependency>
     <groupId>com.github.pagehelper</groupId>
     <artifactId>pagehelper</artifactId>
     <version>4.1.4</version>
</dependency>
<dependency>
   <groupId>com.github.jsqlparser</groupId>
   <artifactId>jsqlparser</artifactId>
   <version>4.1.4</version>
 </dependency>

Mybatis的sqlSessionFactory的里的plugins配置

<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
		<property name="dataSource" ref="dataSource" />
		<property name="configLocation" value="classpath:mybatis.xml" />
		<property name="typeAliasesPackage" value="cn.test.pojo" />
		<property name="plugins">
			<array>
				<bean class="com.github.pagehelper.PageHelper">
					<property name="properties">
						<value>
							dialect=mysql
							offsetAsPageNum=ture
							reasonable=ture
							supportMethodsArguments=true
							returnPageInfo=check
						</value>
					</property>
				</bean>
			</array>
		</property>
	</bean>

java 后台代码

    @RequestMapping("test")
    public String getInfoList(Model model, HttpServletRequest request) {
        String pageNumExp = request.getParameter("pageNum");
        int pageNum = PageUtil.PAGENUM;//初始值1
        if (!EmptyUtil.isEmpty(pageNumExp)) {//空判断
            pageNum = Integer.parseInt(pageNumExp);
        }
     PageHelper.startPage(pageNum, PageUtil.PAGESIZE);
     List<Info> infoList = infoService.selectList()
     PageInfo pageInfo=new PageInfo<Info>(infoList);
     model.addAttribute("page", pageInfo);
     return "hellowWorld";
}

前端代码

  前台模仿百度查询的分页实现方式。

前台jsp代码

<nav aria-label="Page navigation" class="pagenav-box">
                <ul class="pagination">
                    <!--当没有数据时时整个分页条不显示-->
                    <c:if test="${page.firstPage >0}">
                        <!--上一页-->
                        <c:if test="${page.pageNum > 1}">
                            <li>
                                <a href="javascript:pageQuery('${page.pageNum-1}')"
                                   aria-label="Previous"> <span
                                        aria-hidden="true">«</span>
                                </a></li>
                        </c:if>

                        <!--给循环的起始页赋值-->
                        <c:choose>
                            <c:when test="${page.pageNum >5}">
                                <c:set var="beginIndex" scope="page" value="${page.pageNum-5}"></c:set>
                            </c:when>
                            <c:otherwise>
                                <c:set var="beginIndex" scope="page" value="${page.firstPage}"></c:set>
                            </c:otherwise>
                        </c:choose>

                        <!--循环得到列表页数-->
                        <c:choose>

                            <c:when test="${beginIndex+9 < page.lastPage }">
                                <c:forEach var="pageIndex" begin="${beginIndex}"
                                           end="${beginIndex+9}">
                                    <c:choose>
                                        <c:when test="${pageIndex eq page.pageNum}">
                                            <li class="active"><a href="#">${pageIndex}</a></li>
                                        </c:when>
                                        <c:otherwise>
                                            <li>
                                                <a href="javascript:pageQuery('${pageIndex}')">${pageIndex}</a>
                                            </li>
                                        </c:otherwise>
                                    </c:choose>
                                </c:forEach>
                            </c:when>

                            <c:otherwise>
                                <c:forEach var="pageIndex" begin="${beginIndex}"
                                           end="${page.lastPage}">
                                    <c:choose>
                                        <c:when test="${pageIndex eq page.pageNum}">
                                            <li class="active"><a href="#">${pageIndex}</a></li>
                                        </c:when>
                                        <c:otherwise>
                                            <li>
                                                <a href="javascript:pageQuery('${pageIndex}')">${pageIndex}</a>
                                            </li>
                                        </c:otherwise>

                                    </c:choose>
                                </c:forEach>
                            </c:otherwise>
                        </c:choose>
                        <!--下一页-->
                        <c:if test="${page.pageNum != page.lastPage}">
                            <li>
                                <a href="javascript:pageQuery('${page.pageNum+1}')"
                                   aria-label="Next"> <span
                                        aria-hidden="true">»</span>
                                </a></li>
                        </c:if>

                    </c:if>

                </ul>
            </nav>

    /**
     * 分页js方法
     * */
    function pageQuery(pageNum) {
location.href="<%=request.getContextPath()%>/test?pageNum="+pageNum;
    }