페이징에 대한 이해 - 2

이번 글은 '페이징에 대한 이해' 두번째 글 입니다.

스펙에 대한 내용은 생략하고 페이징에 대한 세부적인 내용으로 알아보도록 하겠습니다.

<최종 완성된 게시판>

게시판 UI 는 Bootstrap을 이용합니다.

Bootstrap은 기본적인 UI가 이미 구성이 되어 있어 정해준 class를 이용하여 편리하게 사용할 수 있습니다.

---

일단, Server 입장에서 설명하도록 하겠습니다. (아직 페이징에 대한 이해가 없으시다면 이전 글인 '페이징에 대한 이해 - 1'를 먼저 확인하시기 바랍니다.)

[Server 입장]

본 예제에서는 page 번호에 대한 key를 page로 사용 하겠습니다.

Server 는 Client로 부터 page에 대한 값을 필수적으로 받아와야 합니다. 그리고 page에 대한 값을 받았으면, 실질적으로 데이터베이스 테이블에 어느 부분을 가져와야 하는지 계산을 해준 뒤, Query 를 실행 합니다.

1. 페이지 범위 체크

 - page가 0 이하의 값 이거나 없을 수도 있습니다. 간단하게 Default 값을 1로 주고 0이하의 값은 처리를 하지 않도록 합니다.

2. 검색을 위한 TOP, OFFSET 계산

 - 테이블의 일부분을 가져오기 위해 아래에 데이터를 통해 TOP과 OFFSET을 계산 할 수 있습니다.

 ① 페이지 번호(Client에서 전달 받은 page 값)

 ② 보여줄 게시물 갯수(10으로 고정)

 ③ 전체 테이블 갯수 (Query 상에서 가져옵니다.)

public Page getPage(int pageNo, int recodeSize, long totalSize) {
    Page page = new Page();
        
    page.setPageNo(pageNo);
    page.setRecodeSize(recodeSize);
    page.setTotalSize(totalSize);
    
    page.setTop((pageNo-1)*recodeSize);
    return page;
}

필자 같은 경우는 위와 같은 메소드를 이용하여, TOP 을 계산합니다.(Page라는 객체는 페이지정보를 담을 일종의 Vo 입니다.) 그리고 쿼리에 TOP 값과 RECODE SIZE를 전달 해줍니다.

3. Query 실행

 - 여기서 꼭 알아야할 사항은 DBMS 마다 Query 들이 다르다는 것 입니다.

[ MySQL ]

SELECT  *
FROM    notice
LIMIT   {top},{recode size}

[ORACLE]

SELECT  *
FROM    (SELECT  rownum as rnum, *
         FROM    notice ) n
WHERE   n.rnum BETWEEN {top} AND {top + recode size}

위와 같은 Query로 게시판 일부를 가져올 수 있습니다. 

마지막으로, 게시판 정보들과 페이지정보를 Client에게 반환 해줍니다.

[Client 입장]

javascript에서 ajax를 통해 Server에서 게시판 정보(notices)와 페이지 정보(page)를 전달 받습니다.

1. 게시판 HTML

<table class="table table-striped">
  ...
</table>

2. 페이징 HTML

<nav>
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

위와 같은 태그를 javascript 에서 넣어주어 게시판을 만들어 줄 수 있습니다.

본 예제는 간단하게 보여주기 위한 예제이기 때문에 더 많은 조건 처리가 필요합니다. 이것이 귀찮고 번거롭다면, 플러그인을 이용하여 손쉽게 제작하는 방법도 있습니다. (http://botmonster.com/jquery-bootpag/#.WEjE4rKLRhF)

자세한 소스는 Github을 참고 하시면 됩니다.