자바스크립트 스크롤 내려서 추가 조회 하는 방법, 스크롤 이벤트

 

자바스크립트 스크롤 내려서 추가 조회 하는 방법, 스크롤 이벤트

 

보통 조회하는 데이터의 갯수가 많아 불러오는데 시간이 많이 걸린다면

페이징 처리를 해 원하는 갯수만큼만 조회하는 방식으로 시간을 단축한다.

 

이 방식 외에 원하는 갯수만큼 데이터를 뿌려준 후, 스크롤이 최하단으로 내려갈 때

기존 갯수만큼의 새로운 데이터를 가져와 하단에 붙이는 방식도 있다.

 

이번 포스팅에서는 후자의 방식을 구현해 보려 한다.

페이징처리 방식에 질려 급작스럽게 구현하느라 소스가 이상 할 수도 있다.

하지만 구현되는건 확인했으니 걱정은 말자.

 

-HTML

<div>
  <ul id="list" class="stList">
  
    </ul>

</div>

 

- JAVASCRIPT 소스

<script type="text/javascript">
var page = 1;  //페이징과 같은 방식이라고 생각하면 된다. 
 
$(function(){  //페이지가 로드되면 데이터를 가져오고 page를 증가시킨다.
     getList(page);
     page++;
}); 
 
$(window).scroll(function(){   //스크롤이 최하단 으로 내려가면 리스트를 조회하고 page를 증가시킨다.
     if($(window).scrollTop() >= $(document).height() - $(window).height()){
          getList(page);
           page++;   
     } 
});
 
function getList(page){
 
    $.ajax({
        type : 'POST',  
        dataType : 'json', 
        data : {"page" : page},
        url : '주소'
        success : function(returnData) {
            var data = returnData.rows;
            var html = "";
            if (page==1){ //페이지가 1일경우에만 id가 list인 html을 비운다.
                  $("#list").html(""); 
            }
            if (returnData.startNum<=returnData.totCnt){
                if(data.length>0){
                // for문을 돌면서 행을 그린다.
                }else{
                //데이터가 없을경우
                }
            }
            html = html.replace(/%20/gi, " ");
            if (page==1){  //페이지가 1이 아닐경우 데이터를 붙힌다.
                $("#list").html(html); 
            }else{
                $("#busStopList").append(html);
            }
       },error:function(e){
           if(e.status==300){
               alert("데이터를 가져오는데 실패하였습니다.");
           };
       }
    }); 
}

 

 

- JAVA CONTROLLER 소스

@RequestMapping(value="주소", produces="text/plain;charset=UTF-8")
@ResponseBody   //없으면 AJAX 통신 안되요
public String getList(SearchVO param, HttpServletRequest request, HttpServletResponse response, ModelMap model) {
    Gson gson = new Gson();
    DataSet set = new DataSet();
    try {
        int totalCnt = service.getListCnt(param);  //데이터의 전체 갯수를 가져온다.
        int page = param.getPage();  //파라메터 page값을 받는다.
        if (page==1){
            param.setStartNum(1);
            param.setEndNum(20);  //데이터를 20개씩 가져오겠다.
        }else{
            param.setStartNum(page+(19*(page-1)));  //10개씩 가져오고싶다면 19->9로 
            param.setEndNum(page*20);   //20, 40, 60
        }
        //위에서 구한, 데이터를 가져올 시작 rownum과 끝 rownum을 값을 같이 보낸다. 이 사이의 데이터를 조회
        List<DataVO> list = service.getList(param);  //조회한 데이터를 가져온다.
 
        set.setRows(list);
        set.setTotCnt(totalCnt);
        set.setStartNum(param.getStartNum());
        set.setResultCode(200);
    } catch (Exception e) {
        e.printStackTrace();
    }
    return gson.toJson(set);
}

 

쿼리문은 아래의 Link를 참조한다.

Link : 오라클 부분 조회, 페이징 처리, ROW_NUMBER(), ROWNUM, 원하는 행 조회

 

rnum이 startNum과 endNum 사이의 행의 값을 조회해 온다.

 

이러면 클릭하는 수고(?!) 없이 스크롤을 내리기만 하면 데이터를 조회해 확인 할 수 있다.