본문 바로가기

Javascript/Jquery

스크롤시 데이터 가져오기(Jquery)

<script type="text/javascript">
	$(document).ready(function () {
		var pageSize = $('#pageSize').val();
		var totalPage = ((parseInt($('#myStatusTotalcount').val() / pageSize) + 1))
		$("#divReplyList").load("ReplyList.aspx?PageNo=" + parseInt($('#pageNo').val()) + "&pageSize=" + pageSize, startScroll());
		function startScroll() {
			$("#divReplyList").scroll(function () {
				if ($("#pageLastYN").val() == "N") {
					var elem = $("#divReplyList");
 
					if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()) {
						$("#pageNo").val(parseInt($('#pageNo').val()) + 1);
						var currentPage = parseInt($('#pageNo').val());
 
						if (currentPage <= totalPage) {
							$("#divtempMyStatus").load("ReplyList.aspx?PageNo=" + currentPage + "&pageSize=" + pageSize, function (text, status) {
								$(".listTb:last").after($("#divtempMyStatus").html());
								$("#divtempMyStatus").html("");
 
							});
							$("#divReplyList").unbind();
							window.setTimeout(function () {
								startScroll();
							}, 100);
 
						}
						else {
 
							alert("마지막 페이지 입니다");
							$("#pageLastYN").val("Y");
						}
					}
				}
			});
		}
	});
</script>
붉은 색 부분은 스크롤을 내렸을때 거의 마지막 부분에서 2번을 서버 콜한다. 이러한 것을 방지하기 위한 코드이다.
위의 스크립트 에서 붉은 색으로 된 부분은 수정하여 사용하도록 해야하한다. 0.1초마다 자신을 호출하는 코드는
누가 보아도 좀 부족해 보인다. 팁을 하나 주자면 settimeout을 주되 전역번수에 값을 셋팅하여 비교하는 식으로 하면
더 좋을 듯싶다.
<input id="pageNo" type="hidden" value="1" />
<input id="pageSize" type="hidden" value="10" />
<input id="myStatusTotalcount" type="hidden" value="<%=StatusCount%>" />
<input id="pageLastYN" type="hidden" value="N" /> 
<div id="divtempMyStatus" style="display:none;"></div>
<div id="divReplyList" style="overflow:scrollwidth:670pxheight:430pxoverflow-x:hidden; ">