jQuery + Ajax로 인피니티 스크롤, 무한 스크롤을 구현해보자. -2-

저번글에서 페이지 아래에 도달하면 jquery 이벤트를 실행 되도록 작업하였다
https://ddorm.tistory.com/5

jQuery + Ajax로 인피티니 스크롤, 무한 스크롤을 구현해보자. -1-

이번글에서는 Ajax를 이용해서 데이터를 불러오는 작업을 해보도록 하겠다.

현재 테스트에 사용되고 있는 쿼리는 페이지의 갯수를 정해놓고 paging 변수를 받아 LIMIT을 주는 형식으로 짜여져 있다.
예) 50개의 목록을 가진 게시판 2page = SELECT * FROM bbs WHERE 1=1 LIMIT (페이지 * 50개), 50

위 방식을 토대로 Ajax를 이용해서 작업해보자..!

//현재 스크롤 위치 저장
let lastScroll = 0;
let page = 0;
let nowPageLimit = 0;
let nextPageLimit = 0;

//데이터 가져오는 함수
function getData(limit){
	//다음페이지
	nextPageLimit = (page + 1) * limit;

	$.ajax({
		type: "POST",
		enctype: 'multipart/form-data',
		url: "/testAjax.php",
		async : false,
		data: {
			 "nextPageLimit" : nextPageLimit,
			 "limit" : limit
		},
		success: function(data){
			$("tbody").append(data);
		},
		error: function (data, status, err) {
			page = page;
		}, complete: function(){
			page = page + 1;
		}
	});
}

$(document).scroll(function(e){
    //현재 높이 저장
    var currentScroll = $(this).scrollTop();
    //전체 문서의 높이
    var documentHeight = $(document).height();

    //(현재 화면상단 + 현재 화면 높이)
    var nowHeight = $(this).scrollTop() + $(window).height();


    //스크롤이 아래로 내려갔을때만 해당 이벤트 진행.
    if(currentScroll > lastScroll){

        //nowHeight을 통해 현재 화면의 끝이 어디까지 내려왔는지 파악가능 
        //즉 전체 문서의 높이에 일정량 근접했을때 글 더 불러오기)
        if(documentHeight < (nowHeight + (documentHeight*0.1))){
        	//함수콜
		getData(50);
        }
    }

    //현재위치 최신화
    lastScroll = currentScroll;

});

별 다른것 없이 리스트를 불러오는 getData 라는 함수를 만들었고, 그 안에서 페이징관련 변수처리를 하였다
(라고 해봤자 * limit 밖에 없긴하다)
ajax가 성공하면 success 콜백에 해당 하는 데이터를 tbody 아래 붙여주도록 하였고...
complete 콜백에는 현재 page 변수의 값을 +1 해주었다.

여기서 불러오는데 로딩이미지를 작업하고 싶다는 분들은 ajax 의 before 부분과 complete 부분을 잘 활용해보자!!
(before에서 로딩 이미지 표출 -> complete에서 로딩 이미지 숨기기)

따로 작성은 하지 않겠지만 받는 페이지에서는 getData에서 보낸 nextPageLimit 변수를 가지고 Limit 처리해서 쿼리를 뽑아주면 되겠지???

그럼 잘되는지 확인 해 볼까

GIF 상태 왜이러니...... 우측의 스크롤바의 상태를 보면 더 잘 확인된다.
일단 잘되는구만...