photogram 스크롤시 페이징 처리

스크롤 처리시 page +=2 를 하여 페이징 수를 늘려주고 storyLoad함수를 다시호출(ajax호출)

// (2) 스토리 스크롤 페이징하기
$(window).scroll(() => {

   let checkNum=$(window).scrollTop()-($(document).height()-$(window).height());

   if(checkNum<10 && checkNum>-10){
      page+=2;
      storyLoad();
   }
});

offset 페이지 0 1, 2 Limit 한페이지에 몇개가 나오게할것인가.

let page=0;
// (1) 스토리 로드하기
function storyLoad() {
 $.ajax({
    url:"/api/image?offset="+page+"&limit="+2, // 한 페이지에 3개의 게시물만 나오게해라
    dataType:"json",
 }).done(res=>{
    console.log(res);

    res.data.forEach((image)=>{
       let storyItem=getStoryItem(image);
       $("#storyList").append(storyItem);
    });
 }).fail(error=>{

 })
}

Service로직

페이징 offset 과 limit 를 설정해줌 

List<Image> resultList = em.createQuery("select i from Image i" +
        " join fetch i.user u", Image.class)
        .setFirstResult(offset)
        .setMaxResults(limit)
        .getResultList();

Controller 

@GetMapping("/api/image")
public ResponseEntity<?> imageStory(@AuthenticationPrincipal PrincipalDetails principalDetails,
                                    @RequestParam(value="offset",defaultValue = "0") int offset,
                                    @RequestParam(value="limit",defaultValue = "100") int limit){

    List<Image> images =  imageService.imageStory(principalDetails.getUser().getId(),offset,limit);
    List<ImageResDto> collect = images.stream().map(i -> new ImageResDto(i)).collect(Collectors.toList());

    return new ResponseEntity<>(new CMResDto<>(1,"성공",collect),HttpStatus.OK);
}

 

 

 

 

 

 

페이징 동영상