페이지를 이동하더라도 게시물 번호가 1부터 시작된다.
만약 질문 게시물이 20개라면 0페이지에는 20번째~11번째 게시물이, 1페이지에는 11번째~1번째 게시물이 번호 역순으로 표시되어야 한다.
항목 | 설명 |
---|---|
번호 | 최종 표시될 게시물 번호 |
전체 게시물 개수 | 데이터베이스에 저장된 게시물 전체 개수 |
현재 페이지 | 페이징에서 현재 선택한 페이지 (만약 페이지가 1부터 시작한다면 1을 빼주어야 한다. 하지만 스프링부트의 페이징은 0부터 시작하므로 1을 뺄 필요가 없다.) |
페이지당 게시물 개수 | 한 페이지당 보여줄 게시물의 개수 |
나열 인덱스 | for 문 안의 게시물 순서 (나열 인덱스는 현재 페이지에서 표시할 수 있는 게시물의 인덱스이므로 10개를 표시하는 페이지에서는 0~9, 2개를 표시하는 페이지에서는 0~1로 반복된다.) |
질문 게시물이 15개인 상황에서 현재 페이지가 0이면 번호는 전체 게시물 개수 15개 에서 나열 인덱스 0~9를 뺀 15~6이 되고, 현재 페이지가 1페이지라면 게시물 개수는 10이므로 15-10=5 즉, 남은 게시물 개수 5이고 5에서 0~9를 뺀 5~1이 된다.
공식 그대로 question_list.html 파일에 추가해보자!
<html layout:decorate="~{layout}">
<div layout:fragment="content" class="container my-3">
<table class = "table">
<thead class = "table-info">
<tr>
<th>번호</th>
<th>제목</th>
<th>작성일시</th>
</tr>
</thead>
<tbody>
<tr th:each="questionlist, loop : ${paging}">
1 <td th:text="${paging.getTotalElements - (paging.number * paging.size) - loop.index}"></td>
<td th:text="${loop.count}"></td>
<td>
<a th:href="@{|/question/detail/${questionlist.id}|}" th:text="${questionlist.subject}"></a>
</td>
<td th:text="${#temporals.format(questionlist.createDate, 'yyyy-MM-dd HH-mm')}"></td>
</tr>
</tbody>
</table>
(... 생략 ...)
</div>
</html>
✅ <td th:text="${paging.getTotalElements - (paging.number * paging.size) - loop.index}"></td>
👉 전체 게시물 개수 - (현재 페이지 번호 * 페이지당 게시물개수) - 나열 인덱스
항목 | 설명 |
---|---|
paging.getTotalElements | 전체 게시물 개수 |
paging.number | 현재 페이지 번호 |
paging.size | 페이지당 게시물 개수 |
loop.index | 나열 인덱스(0부터 시작) |
공식 그대로 대입하였다!
게시물에 일련번호가 공식대로 생성되었다!