<li class="page-item" th:classappend="${!studyPage.hasPrevious()}? disabled">
<a th:href="@{'/search/study?keyword=' + ${keyword} + '&sort=' + ${sortProperty} + ',desc&page=' + ${studyPage.getNumber() - 1}}"
class="page-link" tabindex="-1" aria-disabled="true">
Previous
</a>
</li>
studyPage.hasPrevious() 이전 페이지가 있느냐 없느냐를 알려줌, 없는 경우에 disabled class를 추가하는 것이다. 이전 페이지로 가는 링크는 다음과 같이 만들 수 있다.
<li class="page-item" th:classappend="${!studyPage.hasNext()}? disabled">
<a th:href="@{'/search/study?keyword=' + ${keyword} + '&sort=' + ${sortProperty} + ',desc&page=' + ${studyPage.getNumber() + 1}}"
class="page-link">
Next
</a>
</li>
studyPage에 hasNext() 라는 메서드가 있다. 다음 페이지가 있느냐 없느냐 알려줌. 다음 페이지가 없으면 disable 추가해준다.
페이지 개수를 돌아야 한다. th:each (루프 사용!) 0부터 페이지 개수만큼! 타임리프에 numbers 라는 유틸리티가 있음. numbers에 시퀀스를 사용하여 0부터 studyPage.getTotalPages() - 1 까지 루프를 돌면서 만들자. i 라는 값이 현재 studyPage.getNumber() 넘버와 같을 때는 active라는 클래스를 추가하여 선택되어짐을 표현한다.
sortProperty 을 받아서 이 값이 publishedDateTime 이면 dropdown item 이 활성화된 상태로 보여준다.
MainController.java
@GetMapping("/search/study")
public String searchStudy(String keyword, Model model, @PageableDefault(size = 9, sort = "publishedDateTime",
direction = Sort.Direction.DESC)Pageable pageable) {
Page<Study> studyPage = studyRepository.findByKeyword(keyword, pageable);
model.addAttribute("studyPage", studyPage );
model.addAttribute("keyword",keyword); //화면에서 어떤 키워드로 조회했는지 알아야 하므로 keyword 넣어줌
model.addAttribute("sortProperty", pageable.getSort().toString().contains("publishedDateTime") ? "publishedDateTime" :
"memberCount");
return "search";
}
model.addAttribute("sortProperty" .. ) 를 추가해준다.
Sort를 String으로 내보내고, publishedDateTime 으로 되어있으면 Sort은 publish data time으로 한 것이고 이게 없으면 memberCount 로 한 것으로 ..
쿼리를 멤버까지 하고 있는데 그 쿼리 개수를 조금이라도 줄이기 위해
멤버 목록을 가져오는 게 아니라 멤버 카운트를 가져오게 할 것이다. 멤버 카운트는 멤버들이 추가되거나 삭제 될때마다 ++1, --1 를 해주면 된다.
npm install mark.js --save
출처 : 인프런 백기선님의 스프링과 JPA 기반 웹 애플리케이션 개발