2 min to read

[스프링부트 시리즈22] 게시물에 번호저장하기

Featured image

게시물에 번호 지정하기

현재 질문 목록 화면을 보면 어느 페이지에서나 게시물 번호가 1부터 시작해 10까지만 표시된다. 각 게시물에 맞게 번호가 제대로 표시되도록 문제를 해결해 보자. 1

게시물 공식 번호 만들기

만약 질문 게시물이 12개라면 1페이지에는 가장 최근 게시물인 12번째~3번째 게시물이, 2페이지에는 2번째~1번째 게시물이 역순으로 표시되어야 한다. 질문 게시물의 번호를 역순으로 정렬하려면 다음 공식을 적용해야 한다.

게시물 번호 = 전체 게시물 개수 - (현재 페이지 * 페이지당 게시물 개수) - 나열 인덱스

항목 설명
게시물 번호 최종 표시될 게시물의 변호
전체 게시물 개수 DB에 저장된 게시물 전체 개수
현재 페이지 페이징에서 현재 선택한 페이지
페이지당 게시물 개수 한 페이지당 보여줄 게시물 갯수
나열 인덱스 for 문 안의 게시물 순서(나열 인덱스는 현 페이지에서 표시할 수 있는 게시물의 인덱스이므로, 10개를 표시하는 페이지에서는 0~9, 2개를 표시하는 페이지에선 0~1이 반복된다.)

게시물 번호 공식 적용하기

1) 이제 게시물 번호 공식을 다음과 같이 질문 목록 템플릿에 적용해 보자. 다음 코드의 1번째 td 요소에 이 공식을 그대로 적용했다.

[파일명:/templates/question_list.html]

<html layout:decorate="~{layout}">
<div layout:fragment="content" class="container my-3">
    <table class="table">
        <thead class="table-dark">
            (... 생략 ...)
        </thead>
        <tbody>
            <tr th:each="question, loop : ${paging}">
                <td th:text="${paging.getTotalElements - (paging.number * paging.size) - loop.index}"></td>
                <td>
                    <a th:href="@{|/question/detail/${question.id}|}" th:text="${question.subject}"></a>
                </td>
                <td th:text="${#temporals.format(question.createDate, 'yyyy-MM-dd HH:mm')}"></td>
            </tr>
        </tbody>
    </table>
    (... 생략 ...)
</div>
</html>

paging.getTotalElements는 전체 게시물 개수를 말한다. 필자의 경우에는 302개이다. paging.number는 현재 페이지 번호로 페이지를 변경할 때마다 달라진다. paging.size는 페이지당 게시물 개수로 여기서는 10으로 정해져 있다. 마지막으로 loop.index는 나열 인덱스로 0부터 시작한다.

다음 표는 템플릿에 사용한 공식의 상세 정보를 정리한 것이다. 항목|설명 —-|—- paging.getTotalElements| 전체 게시물 개수를 의미한다. paging.number | 현재 페이지 번호를 의미한다. paging.size | 페이지당 게시물 개수를 의미한다. loop.index | 나열 인덱스를 의미한다(0부터 시작)

2) 이제 게시물 번호가 우리가 의도한 대로 출력된다. 출력