SpringBoot + Thymeleaf로 페이징 실현

개요

SpringBoot + Thymeleaf로 목록 화면 페이징

완성시의 화면 이미지

검증 환경

Spring Boot : 2.2.5

H2 Database

구현

Entity

Player.java

@Entity
@Getter
@Setter
public class Player {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Integer id;
    private String name;
    private Integer number;
    private String position;
}

리포지토리

PlayerRepository.java

@Repository
public interface PlayerRepository extends JpaRepository<Player, Integer> {

    public Page<Player> findAll(Pageable pageable);
}

이번에는 JPA를 사용하고 있다

프레젠테이션 레이어에서 다루기 쉽도록 Page형으로 반환
htps : // / cs. sp 링 g. 이오/sp린 g-다타/코몬 s/도 cs/쿤 t/아피/오르/sp린 gf 라메를 rk/다타/도마인/파게. HTML

서비스

PlayerService.java

@Service
public class PlayerService {

    @Autowired
    private PlayerRepository playerRepository;

    public Page<Player> getPlayers(Pageable pageable) {
        return playerRepository.findAll(pageable);
    }
}

컨트롤러

PlayerController.java

@Controller
@RequestMapping("/pages/players")
public class PlayerController {

    @Autowired
    private PlayerService playerService;

    @GetMapping
    public String index(Pageable pageable, Model model) {

        Page<Player> playerPage = playerService.getPlayers(pageable);

        model.addAttribute("page", playerPage);
        model.addAttribute("players", playerPage.getContent());

        return "pages/index";
    }
}

구성

WebConfig.java

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addArgumentResolvers(List<HandlerMethodArgumentResolver> argumentResolvers) {

        PageableHandlerMethodArgumentResolver resolver = new PageableHandlerMethodArgumentResolver();
        // 1ページに表示する最大件数(10件)を設定する
        resolver.setMaxPageSize(10);
        argumentResolvers.add(resolver);
    }
}

1 페이지의 최대 건수 설정은 다음과 같습니다.

resolver.setFallbackPageable(PageRequest.of(0, 10));※ PageRequest.of (페이지 번호, 페이지 크기)

View(Thymeleaf)

index.html

<!-- body部 -->
<h1>INTER PLAYER</h1>
<table border="1" bordercolor="navy">
  <thead>
    <tr>
      <th>NAME</th>
      <th>NUMBER</th>
      <th>POSITION</th>
    </tr>
  </thead>
  <tbody>
    <tr th:each="player : ${players}">
      <td th:text="${player.name}"></td>
      <td th:text="${player.number}"></td>
      <td th:text="${player.position}"></td>
   </tr>
  </tbody>
</table>
<!-- 以降がページネーション部分 -->
<div>
  <ul>
    <li style="display:inline;">
      <span th:if="${page.first}">&lt;&lt;前</span>
      <a
        th:if="${!page.first}"
        th:href="@{/pages/players(page = ${page.number} - 1)}"
      >
        &lt;&lt;前
      </a>
    </li>
    <li
      th:each="i : ${#numbers.sequence(0, page.totalPages - 1)}"
      style="display:inline; margin-left:10px;"
    >
      <span th:if="${i} == ${page.number}" th:text="${i + 1}">1</span>
      <a
        th:if="${i} != ${page.number}"
        th:href="@{/pages/players(page = ${i})}"
      >
        <span th:text="${i+1}">1</span>
      </a>
    </li>
    <li style="display:inline; margin-left:10px;">
      <span th:if="${page.last}">次&gt;&gt;</span>
      <a
        th:if="${!page.last}"
        th:href="@{/pages/players(page = (${page.number} + 1))}"
      >
        次&gt;&gt;
      </a>
    </li>
  </ul>
</div>

인터페이스 페이지 <T>

htps : // / cs. sp 링 g. 이오/sp린 g-다타/코몬 s/도 cs/쿤렌 t/아피/오르/sp린 gf 라메를 rk/다타/도마인/파게. HTML

방법
상세


getContent()
페이지 콘텐츠를 List로 반환

getNumber()
얼마나 많은 페이지인지 반환

getSize()
페이지 크기 반환

getTotalPages()
총 페이지 수 반환

isFirst()
첫 페이지이거나 진위 값을 반환합니다.

isLast()
마지막 페이지이거나 진위 값을 반환합니다.

마지막으로

Pageable을 전달하여 쉽게 구현할 수 있습니다

전량 취득해 와서 클라이언트 측에서 어쩔 수 있을까 생각했지만, 이번 검증한 것은 매번 DB 액세스 하는 방식이었다

정렬 요구 사항을 추가하면 변경되므로 나중에 확인해 보겠습니다

참조

htps : // 기주 b. 코 m / m 치즈 r2k / 파게아 b ぇ Sp 링 g 보오

htps //w w. 장미 l 젠 g. 코 m / sp 린 g-data-j 빠 파기 나치 온 - r ching g

2020/3/14 추가

1 페이지의 최대 건수 설정은, 이하가 좋을지도

WebConfig.java 는 삭제한다

HandlerMethod 인수 Pageable에 @PageableDefault htps : // / cs. sp 링 g. 이오 / sp 링 g-data / Data-Komon s / Docs / Crun t / Api / Og / sp Rin gf Rame 푹신한 lt. HTML

PlayerController.java

@Controller
@RequestMapping("/pages/players")
public class PlayerController {

    @Autowired
    private PlayerService playerService;

    @GetMapping
    public String index(@PageableDefault(page = 0, size = 10) Pageable pageable, Model model) {

        Page<Player> playerPage = playerService.getPlayers(pageable);

        model.addAttribute("page", playerPage);
        model.addAttribute("players", playerPage.getContent());

        return "pages/index";
    }
}