[Thymeleaf]게시판 Table에서 Paging 적용하기(SpringBoot)

[Thymeleaf]게시판 Table에서 Paging 적용하기(SpringBoot)

안녕하세요!

보통 웹사이트에서 다량의 데이터들을 효율적으로 보여주고자 할 때 표를 많이 사용합니다.

 

이 때 페이징이 잘 안되서 주로 애를 먹고는 했는데요,

오늘은 표 구성과 함께 페이징을 한번 정리해보도록 하겠습니다.

---

1. View 제작하기

1.1 표(table) 만들기

먼저 페이징을 위해서는 표가 필요하니 표에 대한 코드를 작성합니다.

        <table>
            <tr align="center">
                <th class="th">제목1</th>
                <th class="th">제목2</th>
                <th class="th">제목3</th>
            </tr>
            <tr th:each="item : ${list}" class="tr">
                <td th:text="${item.title1}" class="td"></td>
                <td th:text="${item.title2}" class="td"></td>
                <td th:text="${item.title3}" class="td"></td>
            </tr>
        </table>

 

서버에서 list라는 변수에

 

title1,title2,title3라는 변수를 담고있는 클래스를 멤버로 가지고 있는 리스트를 보내준 상황입니다.

 

이대로 코드를 실행하면 테이블만 나오게 됩니다.

1.2 페이징 코드 작성하기

표는 완성되었으니 이제 표 아래에 페이징 코드를 넣어줍니다.

 

<nav style="text-align: center;">
            <!--표에 사용될 변수값 초기화 -->
            <ul class="pagination"
                th:with="start=${T(Math).floor(list.number/10)*10 + 1},
                    last=(${start + 9 < list.totalPages ? start + 9 : list.totalPages})">
                <th:block th:with="
                firstAddr=@{/chart(page=1)},
                prevAddr=@{/chart(page=${list.number})},
                nextAddr=@{/chart(page=${list.number + 2})},
                lastAddr=@{/chart(page=${list.totalPages})}">
                    <li>
                        <a th:href="${firstAddr}" aria-label="First">
                            <span aria-hidden="true">First</span>
                        </a>
                    </li>
                    <!-- 이전 페이지로 가기 버튼 -->
                    <li th:class="${list.first} ? 'disabled'">
                        <a th:href="${list.first} ? '#' :${prevAddr}"
                           aria-label="Previous">
                            <span aria-hidden="true">&lt;</span>
                        </a>
                    </li>
                    <!--1,2,3,4,.. 등 페이지-->
                    <li th:each="page: ${#numbers.sequence(start, last)}"
                        th:class="${page == list.number + 1} ? 'active'">
                        <a th:text="${page}" th:href="@{/chart(page=${page})}"></a>
                    </li>
                    <!--다음 페이지로 -->
                    <li th:class="${list.last} ? 'disabled'">
                        <a th:href="${list.last} ? '#' : ${nextAddr}"
                           aria-label="Next">
                            <span aria-hidden="true">&gt;</span>
                        </a>
                    </li>
                    <!--맨 마지막 페이지로 이동 -->
                    <li>
                        <a th:href="${lastAddr}" aria-label="Last">
                            <span aria-hidden="true">Last</span>
                        </a>
                    </li>
                </th:block>
            </ul>
        </nav>

list의 사이즈를 알아내서 start 및 last에 넣어서 페이징하는데 활용하고

 

firstAddr~lastAddr은 각 페이지 번호를 눌렀을 때 요청을 보낼 url입니다.

 

참고로 이 때 요청은 Get방식으로 날아가게 됩니다.

 

 

---

2. Controller 제작하기

다음은 페이징 번호들을 눌렀을 때 요청을 보낼 코드를 작성합니다.

 

    @RequestMapping(value = "/chart", method = RequestMethod.GET)
    public String chart(Model model, @PageableDefault Pageable pageable) {
        model.addAttribute("list", chartService.searchInfoList(pageable));
        return "/chart";
    }
 

 

이 때 JPA를 사용하여 페이징 요청을 보내고 처리할 것이기 때문에

 

매개변수로 Pageable을 받아와야 합니다.

---

3. Service 제작하기

서비스에서는 페이징 인덱스 값이 Pageable의 페이지 값이 1페이지씩 차이가 있기 때문에 이 내용을 조절해서 

 

페이징 값을 다시 세팅해 준 후 repository로 데이터를 가져옵니다.

    //데이터들을 페이징해서 리턴.
    public Page<ChartDTO> searchInfoList(Pageable pageable){
        int page = (pageable.getPageNumber() == 0) ? 0 : (pageable.getPageNumber() - 1); // page는 index 처럼 0부터 시작
        pageable= PageRequest.of(page,10);
 
       Page<ChartDTO> dtoList = chartRepository.selectInfoList(pageable);
        return dtoList;
    }
 

---

4. Repository 작성하기.

리포지토리는 별거 없습니다.

 

Service에서 만들어준 Pageable을 넣어주고 모든 데이터를 가져옵니다.

(JPA에서 페이징은 매개변수로 Pageable만 넣어줘도 동작합니다)

public interface ChartRepository extends JpaRepository<ChartVO, String> {
@Query("select c from ChartVO c")
   Page<ChartDTO> selectInfoList(Pageable pageable);
}

---

5. 테스트 해보기

지금까지 작성한 내용을 돌려보면 다음과 같이 뜨게 됩니다.

(검색 결과 내용은 보안상 가렸습니다. 양해부탁드립니다:))

 

테이블 Paging 결과

그럼 이번 포스팅은 여기서 마치도록 하겠습니다!

 

혹시 이해가 안가셨거나 잘못된 부분이 있다면 댓글로 알려주시면 감사드리겠습니다:)