[Spring] Java pagination 구현

✅pagination 구현

💡 페이지네이션은 많은 양의 콘텐츠를 탐색하기 쉽도록 여러 화면에 나누고, 분할된 화면을 탐색하는 데 사용되는 요소이다.

📌 필요한 파일
XML, Service, VO, ServiceImpl, Controller, JSP, Mapper

MyBatic 기반이기에 DB에서 데이터를 불러와 화면에 표현하는 방식을 선택했다.

📌 page에 필요한 컬럼은
pageNo, pageSize, totalCount, totalPage이다.

먼저 totalCount를 구하기 위한 쿼리를 작성했다.

SELECT COUNT(*)
FROM sm_board
WHERE del_yn != 'Y'

그런 다음, 게시판의 리스트를 불러오는데

MySQL 기반이기에 LIMIT을 사용한다.
offSet, pageSize를 넣어 해당 페이지의 리스트만 호출되게끔 쿼리를 작성한다.

💡 이때, MySQL에서 LIMIT n, m 을 사용해서, n번째 데이터부터 m개의 데이터를 반환시키는 함수를 사용한다.

SELECT *
FROM sm_board
WHERE del_yn != 'Y'
ORDER BY created_at desc
LIMIT #{offSet}, #{pageSize};

페이지네이션을 위한 쿼리 작성은 완료!

그다음 pageVO를 작성한다.
기존에 있던 BoardVO 에 extends를 하여 자연스래 호출되게끔 한다.

<public class SmBoardVO extends SmPageVO

page.VO

private int pageNo = 1;
private int pageSize = 10;
private int totalCount;

public int getOffset() {
    if (pageNo < 1) pageNo = 1;
    return (pageNo - 1) * pageSize;
}

public int getPageNo() {
    return pageNo;
}

public void setPageNo(int pageNo) {
    this.pageNo = pageNo;
}

public int getPageSize() {
    return pageSize;
}

public void setPageSize(int pageSize) {
    this.pageSize = pageSize;
}
//전체 페이지 수, 총 글 개수 나누기 10 (밑에 번호)
public int getTotalPage() {
    return (int) Math.ceil((double) totalCount / pageSize);
}
public int getTotalCount() { return totalCount; }
public void setTotalCount(int totalCount) { this.totalCount = totalCount; }

페이지는 기본값 1, 사이즈는 10으로 지정했다.
MySQL의 LIMIT을 사용했을때

페이지	offset
1페이지	0
2페이지	10
9페이지	80

이라서 👉 +1 없는 계산을 써야 한다.

boardController.java

@RequestMapping(value = "/list", method = RequestMethod.GET)
    public String boardPage(SmBoardVO vo, ModelMap model) throws Exception {
    	//총 글 개수
        int totalCount = smBoardService.selectBoardListCnt(vo);
        vo.setTotalCount(totalCount); //세팅해주기

        List<SmBoardVO> boardList = smBoardService.selectBoardList(vo);

        model.addAttribute("num", totalCount);
        model.addAttribute("boardList", boardList);
        model.addAttribute("page",vo);
        return "smSolution/adm/board/board_list";
    }

컨트롤러는 총 글 개수를 DB에서 불러와 세팅해준다.
pageNo, pageSize는 기본값으로 1, 10 이 세팅된다.

페이지네이션 컴포넌트는 여러 곳에서 자주 사용할 수 있으므로 jsp를 따로 분리해서 작성해준다.

pagination.jsp

<c:set var="pageNo" value="${page.pageNo}" />
<c:set var="pageSize" value="${page.pageSize}" />
<c:set var="totalPage"
       value="${page.totalPage}" />

<div class="pagination">

    <!-- 이전 -->
    <c:if test="${pageNo > 1}">
        <a class="page-btn" href="?pageNo=${pageNo - 1}">이전</a>
    </c:if>

    <!-- 페이지 번호 -->
    <c:forEach var="i" begin="1" end="${totalPage}">
        <c:choose>
            <c:when test="${i == pageNo}">
                <strong class="page-btn" >${i}</strong>
            </c:when>
            <c:otherwise>
                <a class="page-btn" href="?pageNo=${i}">${i}</a>
            </c:otherwise>
        </c:choose>
    </c:forEach>

    <!-- 다음 -->
    <c:if test="${pageNo < totalPage}">
        <a class="page-btn" href="?pageNo=${pageNo + 1}">다음</a>
    </c:if>
</div>

이 컴포넌트는 이렇게 호출하여 사용한다.

<%@ include file="../../main/pagination.jsp" %>
       

✅최종 화면

✅전체 흐름

브라우저
 → GET /board/list?pageNo=2
   → Controller
     → Service
       → Mapper (MyBatis)
         → MySQL
       ← 결과
     ← Model 세팅
   → JSP (board.jsp)
     → pagination.jsp include

1. page를 클릭하여 pageNo = 2, pageSize = 10 이라는 값을 세팅
2. Controller에서 Mapper를 호출하여 VO에 getOffSet을 계산한다.
3. (pageNo - 1) * pageSize; ex) 2 => offset = 10
4. xml에서 리스트 조회 쿼리 호출
5. 조회된 목록 model 세팅
6. jsp 표현