반응형
jQuery를 사용하여 페이지 스크롤이 끝까지 내려갔을 때 새로운 데이터를 가져와서 화면에 보여주는 무한 스크롤 기능을 구현하는 코드입니다.
페이지 로드 시 page와 list를 초기화하고, page_start를 계산하고 List 함수를 한번 호출 합니다. List 함수는 list (보여지는 게시글 수) 와 page_start 를 data로 전송 하고 응답은 JSON 형식으로 받아 옵니다.
ajax.php 는 실제 db 조회 후 data를 뿌려 주어야 하지만 간단한 예제이므로 totalCount=20 으로 정하고 5개씩 data 변수를 JSON 형식으로 반환 하고 있습니다. 스크롤 이벤트가 발생하면, 스크롤바가 윈도우 창의 아래쪽에 닿았는지 확인하고, page가 total_page보다 작으면 List 함수를 실행합니다. 스크롤 이벤트가 발생하면, 스크롤바가 윈도우 창의 아래쪽에 닿았는지 확인하고, page가 total_page보다 작으면 List 함수를 실행합니다.
VIEW 페이지
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js" /></script>
<script>
$(document).ready(function() {
var page = 1; //처음 보여준 페이지 다음부터 시작
var list = 5; //한 페이지에 보여지는 게시글 수
var total_page=1;
var page_start = (page-1)*list; // db에서 몇번째 자료부터 보여줄지 정합니다
$.fn.List = function(){
$.ajax({
type:"post",
dataType: "json",
data: {
'list' : list,
'page_start' : page_start
},
url: "ajax.php",
}).done(function(data) {
page += 1; //페이지를 1 올립니다.
page_start = (page-1)* list;
total_page = Math.ceil(data.count/list);
if(data.data){
$('#empty').remove();
}
$('#contents').append(data.data);
});
}
$(window).scroll(function() {
if ($('body').height() <= ($(window).height() + $(window).scrollTop())) { //스크롤바가 윈도우창 아래쪽에 닿았을때
if(page<=total_page){ //페이지가 페이지 총합보다 적으면
$(this).List();
}
}
});
$(this).List();
});
</script>
<body>
<div id="contents">
<div id="empty">
데이터가 없습니다.
</div>
</div>
</body>
Ajax 페이지
<?php
$totalCount=20;
for ($i = 1; $i <= 5; $i++) {
$data.='<div class="box" style="font-size:30px; height:500px; border:1px solid;">Box '.$i.'</div>';
}
$rst = json_encode(array("count"=>$totalCount, "data"=>$data));
echo $rst;
?>
위의 이미지는 최초 페이지 로드시 list=5, page_start=0 이고 다음 스크롤 이벤트가 발생하면 list=5, page_start=5,...
다음은 list=5, page_start=10 으로 진행된다.
반응형
'개발이야기 > jQuery' 카테고리의 다른 글
| [jQuery] clockpicker 사용방법, 예제 (시간선택, 시계모양 UI) (0) | 2023.06.01 |
|---|---|
| [jQuery] jqGrid 데이터 없을 때 처리하기 (jqGrid no data) (0) | 2023.05.30 |
| [jQuery] 로그인 아이디 체크박스로 저장하기 (쿠키 사용하기) (0) | 2023.05.03 |
| [jQuery] Autocomplete 사용법, 예제, 옵션 (자동완성 기능) (0) | 2023.04.27 |
| [jQuery] select2 사용하기 (option 검색, 다중 선택) (0) | 2023.04.26 |
댓글