Pagination

9개의 글을 한 페이지에 3개씩 보여줄 때 전체 페이지의 수는 9\/3으로 이 된다.

첫 페이지는 1~3

두 번째는 4~6

세 번째는 7~9

여기 아래와 같은 공식이 나온다.

현재 페이지에 보여줄 데이터의 시작번호 = (현재 페이지 -1) * 출력 개수 + 1
현재 페이지에 보여줄 데이터의 종료번호 = 시작번호 + 출력개수 - 1

위 공식에 실제 페이지를 대입해 보면

1 페이지의 시작 페이지는 = (1-1)* 3 + 1 = 1, 종료 페이지는 1 + 3 – 1 = 3

2 페이지의 시작 페이지는 = (2-1)* 3 + 1 = 4, 종료 페이지는 4 + 3 – 1 = 6

3 페이지의 시작 페이지는 = (3-1)* 3 + 1 = 7, 종료 페이지는 7 + 3 – 1 = 9

이 코드를 간단하게 설명하면 전체 데이터 개수(total)를 받아서 totRow에 보관한다.

전체 데이터수를 출력하고자 하는 개수(displayRowCount)로 나누어

전체 페이지(totPage)를 계산한다.

무조건 올림을 해야 정확한 페이지 수를 얻을 수 있다.

예로 데이터 수가 21 개 일 때 단순 나누기를 하면 2페이지가 나온다.

무조건 올림을 해야 정확한 3페이지를 얻을 수 있다.

그래서 나눈 후 나머지가 있으면 전체 페이지(totPage) 값을 1증가 시킨다.

시작 행 번호(rowStart)와 종료 행 번호(rowEnd)는 앞서 언급한 공식을 이용하여 생성하였다.

시작페이지(pageStart), 종료페이지(pageEnd)는 설명하지 않는다.

다만, 데이터가 수천, 수 만 일 경우 페이지도 수백, 수천이 된다.

모든 페이지를 보여 줄 수 없기 때문에

페이지 리스트에 대한 페이징 처리를 하게 되고 이것을 의미한다.

아래코드는 공통 페이지 처리를 위한 것

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

즉, 기존에 처리한 페이징의 링크는 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>