5. 게시판 확장 II - 페이징을 공통으로

페이징 처리는 리스트 형식으로 데이터를 보여주는 모든 페이지에 사용되는 기능이다.

그래서, 자바에서는 PageVO로 만들어서 상속받아서 사용하도록 처리했다.

HTML에서도 공통처리하고 가져다가 사용하면 개발 시간을 단축하는 효과를 볼 수 있다.

공통으로 처리하기 위해서

공통부분을 별도의 JSP 파일로 빼고 해당 파일을 jsp:include로 가져오도록 한다.

하지만 앞서 검색 기능을 추가하였다.

현재는 검색 후 결과에 대하여 페이징이 되지 않는다.

이 문제를 해결하는 방법은

검색 폼의 내용과 페이지 번호가 같이 서버로 전송되어야 한다는 것이다.

즉, 기존에 처리한 페이징의 링크는 URL에 파라메터로 페이지 번호가 넘어가고(board3List?page=1)

검색은 폼의 입력 값들을 따로 만들어서 전송하기 때문에 같이 전송되지 않는다.

따라서, 페이징을 위해

현재 보는 페이지 번호가 폼과 같이 전송되게 하는 것이 가장 쉽다 (반대로 하면 처리가 복잡하다). 

Hidden 필드로 페이지(name=page)를 추가하고

링크가 아닌 자바 스크립트로 호출하게 처리하는 것이다.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<c:if test="${searchVO.totPage>1}">
    <div class="paging">
        <c:if test="${searchVO.page>1}">
            <a href="javascript:fnSubmitForm(1);">[처음]</a>
            <a href="javascript:fnSubmitForm(${searchVO.page-1});">[이전]</a>
        </c:if>
               
        <c:forEach var="i" begin="${searchVO.pageStart}" end="${searchVO.pageEnd}" step="1">
            <c:choose>
                <c:when test="${i eq searchVO.page}">
                    <c:out value="${i}"/>
                </c:when>
                <c:otherwise>
                    <a href="javascript:fnSubmitForm(${i});"><c:out value="${i}"/></a>
                </c:otherwise>
            </c:choose>
            <c:if test="${not status.last}">|</c:if>
        </c:forEach>
       
    <c:if test="${searchVO.totPage > searchVO.page}">
        <a href="javascript:fnSubmitForm(${searchVO.page+1});">[다음]</a>
        <a href="javascript:fnSubmitForm(${searchVO.totPage});">[마지막]</a>
    </c:if>
    </div>
    <br/>
       
    <input type="hidden" name="page" id="page" value="" />
       
    <script type="text/javascript">
    function fnSubmitForm(page){
        document.form1.page.value=page;
        document.form1.submit();
    }
    </script>
</c:if>

common/pagingforSubmit.jsp

코드에서 확인 할 수 있듯이

페이징 관련 모든 링크는 fnSubmitForm 함수를 가고자 하는 페이지 번호와 함께 호출한다.

이 함수는 hidden 테그로 생성한 page에 값을 넣고(document.form1.page.value=page)

서버로 전송한다 (submit).

이때 폼 이름이 form1으로 검색에서 사용되는 폼 이름과 같다.

설명이 길었지만 코드는 위와 같이 간단하다.

페이징 처리에 추가된 코드는 이전(page-1), 다음(page+1), 처음으로(1),

마지막(totPage)으로 기능을 넣은 것이다.

화면에 보이는 페이지는 10개의 페이지 이다.

다음 10개 페이지(pageEnd+1), 이전 10개 페이지(pageStart-1)도 만들어 보면 좋을 것이다.

기존 JSP(boardList.jsp)파일에서는 페이징 관련 코드들을 지우고,

폼 테그 안 쪽에 페이징 파일을 가져(include) 오는 코딩을 해 준다.

<form id="form1" name="form1"  method="post">
    <jsp:include page="/WEB-INF/jsp/common/pagingforSubmit.jsp" />
    <div>
        <input type="checkbox" name="searchType" value="brdtitle" <c:if test="${fn:indexOf(searchVO.searchType, 'brdtitle')!=-1}">checked="checked"</c:if>/>
          ~~ 생략 ~~
    </div>
</form> 

boardList.jsp

이상의 내용과 게시판 2에서 정리한 내용을 합하여 정리하면

컨트롤에서 pageVO.pageCalculate를 호출하고

JSP에서 pagingforSubmit.jsp만 호출하면

간단하게 페이징 처리가 된다는 것이다.

페이징 처리는 리스트 기능에 거의 사용되는 것이니 알고 있는 것이 좋다.