1. 개요 

이 빠른 사용방법(예제)에서는 Spring 및 Thymeleaf를 사용하여 페이지 매김이 포함 된 항목 List 을 표시하는 간단한 애플리케이션을 빌드합니다 .

Thymeleaf를 Spring과 통합하는 방법에 대한 소개는 여기 에서 우리 기사를 참조  하십시오 .

2. Maven 의존성

일반적인 Spring 의존성 외에도 Thymeleaf 및 Spring Data Commons에 대한 의존성을 추가 할 것입니다.

<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf-spring5</artifactId>
    <version>3.0.11.RELEASE</version>
</dependency>
<dependency>
    <groupId>org.springframework.data</groupId>
    <artifactId>spring-data-commons</artifactId>
    <version>2.3.2.RELEASE</version>
</dependency>

Maven Central 저장소에서 최신 thymeleaf-spring5  및 spring-data-commons 의존성을 찾을 수 있습니다  .

3. 모델

샘플 애플리케이션은 책 List의 페이지 매김을 보여줍니다.

먼저 두 개의 필드와 모든 인수 생성자가 있는 Book 클래스를 정의 해 보겠습니다 .

public class Book {
    private int id;
    private String name;

    // standard constructor, setters and getters
}

4. 서비스

그런 다음 SpringData Commons 라이브러리를 사용하여 요청 된 페이지에 페이지가 매겨진 도서 List 을 생성 하는 서비스를 생성합니다 .

@Service
public class BookService {

    final private List<Book> books = BookUtils.buildBooks();

    public Page<Book> findPaginated(Pageable pageable) {
        int pageSize = pageable.getPageSize();
        int currentPage = pageable.getPageNumber();
        int startItem = currentPage * pageSize;
        List<Book> list;

        if (books.size() < startItem) {
            list = Collections.emptyList();
        } else {
            int toIndex = Math.min(startItem + pageSize, books.size());
            list = books.subList(startItem, toIndex);
        }

        Page<Book> bookPage
          = new PageImpl<Book>(list, PageRequest.of(currentPage, pageSize), books.size());

        return bookPage;
    }
}

위의 서비스에서 우리 는  Pageable  인터페이스로 표현되는 요청 된 페이지를 기반으로 선택된 페이지 를 반환하는 메서드를 생성했습니다 . PageImpl의 클래스는 책의 페이지가 매겨진 List을 필터링 할 수 있습니다.

5. 스프링 컨트롤러

페이지 크기와 현재 페이지 번호가 주어 졌을 때 선택된 페이지의 책 List 을 검색하려면 Spring 컨트롤러가 필요합니다 .

선택한 페이지 및 페이지 크기에 대한 기본값을 사용하려면 매개 변수없이 / listBooks 의 리소스에 간단히 액세스 할 수 있습니다 .

페이지 크기 또는 특정 페이지가 필요한 경우 page 및 size 매개 변수를 추가 할 수 있습니다 .

예를 들어  / listBooks? page = 2 & size = 6 은 페이지 당 6 개의 항목이있는 2 페이지를 검색합니다.

@Controller
public class BookController {

    @Autowired
    private BookService bookService;

    @RequestMapping(value = "/listBooks", method = RequestMethod.GET)
    public String listBooks(
      Model model, 
      @RequestParam("page") Optional<Integer> page, 
      @RequestParam("size") Optional<Integer> size) {
        int currentPage = page.orElse(1);
        int pageSize = size.orElse(5);

        Page<Book> bookPage = bookService.findPaginated(PageRequest.of(currentPage - 1, pageSize));

        model.addAttribute("bookPage", bookPage);

        int totalPages = bookPage.getTotalPages();
        if (totalPages > 0) {
            List<Integer> pageNumbers = IntStream.rangeClosed(1, totalPages)
                .boxed()
                .collect(Collectors.toList());
            model.addAttribute("pageNumbers", pageNumbers);
        }

        return "listBooks.html";
    }
}

뷰에 대한 페이지 매김을 준비하기 위해 선택한 페이지 및 페이지 번호 List을 포함하여 Spring 컨트롤러에 모델 속성을 추가했습니다 .

6. Thymeleaf 템플릿

이제 Spring 컨트롤러의 모델 속성을 기반으로 페이지 매김이있는 책 List 을 표시 하는 Thymeleaf 템플릿 “listBooks.html” 을 만들 차례 입니다.

먼저 책 List을 반복하여 표에 표시합니다. 그런 다음 총 페이지 수가 0보다 클 때 페이지 매김 을 표시합니다 .

페이지를 클릭하고 선택할 때마다 해당 도서 List이 현재 페이지 링크가 강조 표시된 상태로 표시됩니다.

<table border="1">
    <thead>
        <tr>
            <th th:text="#{msg.id}" />
            <th th:text="#{msg.name}" />
        </tr>
    </thead>
    <tbody>
        <tr th:each="book, iStat : ${bookPage.content}"
            th:style="${iStat.odd}? 'font-weight: bold;'"
            th:alt-title="${iStat.even}? 'even' : 'odd'">
            <td th:text="${book.id}" />
            <td th:text="${book.name}" />
        </tr>
    </tbody>
</table>
<div th:if="${bookPage.totalPages > 0}" class="pagination"
    th:each="pageNumber : ${pageNumbers}">
    <a th:href="@{/listBooks(size=${bookPage.size}, page=${pageNumber})}"
        th:text=${pageNumber}
        th:class="${pageNumber==bookPage.number + 1} ? active"></a>
</div>

7. 결론

이 기사에서는 Spring 프레임 워크와 함께 Thymeleaf를 사용하여 List에 페이지를 매기는 방법을 설명했습니다.

평소처럼 기사에 사용 된 모든 코드 샘플 은 GitHub에서 사용할 수 있습니다 .