81. 페이징 뷰 개선

부트스트랩

• https://getbootstrap.com/docs/4.5/components/pagination/

Pagination

정렬 조건 추가

• 스터디 공개 일시
• 멤버수

키워드 하이라이팅

• mark.js
• https://markjs.io/

mark.js – JavaScript keyword highlight

npm install mark.js --save

    $(function(){
        var mark = function() {
            // Read the keyword
            var keyword = $("#keyword").text();

            // Determine selected options
            var options = {
                "each": function(element) {
                    setTimeout(function() {
                        $(element).addClass("animate");
                    }, 150);
                }
            };

            // Mark the keyword inside the context
            $(".context").unmark({
                done: function() {
                    $(".context").mark(keyword, options);
                }
            });
        };

        mark();
    });

---

검색 결과 정렬방식을 홈화면에서 바꿀 수 있도록 MainController에서 sortPropery를 model에 추가

package me.weekbelt.studyolle.modules.main;

@RequiredArgsConstructor
@Controller
public class MainController {

    // .......
    
    @GetMapping("/search/study")  // TODO: size, page, sort를 Pageable에 바인딩
    public String searchStudy(String keyword, Model model,
                              @PageableDefault(size = 9, sort = "publishedDateTime", direction = Sort.Direction.DESC)
                                      Pageable pageable) {
        // .........
        
        model.addAttribute("sortProperty",
                pageable.getSort().toString().contains("publishedDateTime") ? "publishedDateTime" : "memberCount"); // 추가
        
        // .........
    }
}

 

참고: https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-JPA-%EC%9B%B9%EC%95%B1#

스프링과 JPA 기반 웹 애플리케이션 개발 - 인프런