Ajax Paging

from 웹디자이너를 위한 jQuery

데이터 HTML을 준비하자.

한 페이지에 표시하기엔 많은 게시물 리스트를 여러 페이지에 분할하여 표시하는 샘플1을 만들어 봅시다. 먼저 Ajax로 읽어 들일 컨텐츠를 준비합니다. Ajax 는 XML이나 JSON, 텍스트 등의 데이터를 다루지만 여기서는 좀더 간단히 만들어 보기 위해 HTML을 사용합시다. 데이터 HTML은 1페이지를 "data1.html", 2페이지를 "data2.html", 3페이지를 "data3.html"로 이름 지어 준비합니다.

데이터 HTML은 다음과 같습니다. Ajax라고 해서 특별한 부분은 없습니다. id 속성에 "content"를 지정한 div 태그를 배치하고 그 안쪽에 표시하고 싶은 내용을 기술합니다. 여기에서는 게시물 1건에 class 속성 "column"을 설정한 div 태그로 감싸고 있습니다.

							

게시글 1-1

  • 제목 : 게시글 1-1 의 제목
  • 내용 : 게시글 1-1 의 내용
  • 작성일 : 2011-09-27

게시글 1-2

  • 제목 : 게시글 1-2 의 제목
  • 내용 : 게시글 1-2 의 내용
  • 작성일 : 2011-09-27

게시글 1-3

  • 제목 : 게시글 1-3 의 제목
  • 내용 : 게시글 1-3 의 내용
  • 작성일 : 2011-09-27

게시글 1-4

  • 제목 : 게시글 1-4 의 제목
  • 내용 : 게시글 1-4 의 내용
  • 작성일 : 2011-09-27

전체 HTML을 만들자

데이터를 읽어 들여 표시하는 전체 HTML은 다음과 같이 기술합니다. 컨텐츠를 표시하고 싶은 영역에 id속성 "content"를 설정한 div 태그를 만듭니다. 컨텐츠는 앞에 기술한 데이터용 HTML로부터 읽어 들이므로 div 태그에는 데이터를 가져 오는 중에 표시할 로딩 중 아이콘을 표시해 둡니다. 각 페이지로의 네비게이션 링크는 ul/li 태그로 기술하고 li 태그 안의 a 태그 href 속성에 데이터 HTML 파일명을 설정합니다.

							

CSS는 다음과 같습니다. #content 안에는 로딩 중 아이콘이 표시되는 경우와 게시물 정보(컨텐츠 데이터의 #content 안)가 표시되는 경우가 있으므로 두가지 표시 경우를 고려하여 기술합니다. a.select는 내비게이션 링크 안에 현재 표시 중인 페이지 번호에 적용되는 스타일입니다. 표시 중인 페이지 번호에는 다음에 스크립트에서 "selected"라는 class를 설정합니다.

							#container{width:500px;margin:20px auto;}
							div.colmun{width:500px;border-bottom:1px solid #CCC;}
							div.colmun:after{content:".";display:block;clear:both;visibility:hidden;height:0;}
							div.colmun div.img{float:left;width:60px;border:1px solid #ccc;padding:5px;margin:5px;display:inline;}
							div.colmun div.img img{border:0;}
							div.colmun div.info{float:left;padding:5px;width:400px;}
							div.colmun div.info h2{margin:0;color:#009AFF;font-size:small;}
							div.colmun div.info ul{margin:0;padding:15px 0 0 15px;}
							div.colmun div.info li{margin:0;font-size:small;}
							p.loading{text-align:center;margin:10px;}
							ul.pager{text-align:center;padding:10px;}
							ul.pager li{display:inline;}
							ul.pager li a{border:1px solid #009AFF;color:#009AFF;font-weight:bold;margin:2px;padding:5px;text-decoration:none;}
							ul.pager li a.selected{background:#73C7FF;}																					
						

스트립트 부분은 아래와 같습니다.

							$(function(){
								
								$("#content").load($("ul.pager li a:first").attr("href")+" #content");
								$("ul.pager li a:first").addClass("selected");
								
								$("ul.pager li a").click(function(){
									
									$("#content").html('

'); $("#content").data("file",$(this).attr("href")); $('html,body').animate({ scrollTop: $("h1").offset().top-20 }, 'slow','swing',function(){ $("#content").load($("#content").data("file")+" #content"); }) $("ul.pager li a").removeClass("selected"); $(this).addClass("selected"); return false; }); });

2~3행은 페이지의 초기 표시 상태를 설정하고 있습니다. ul.pager 안의 첫 번째 a 태그의 href 속성을 attr()로 가져오고 "#content"를 연결합니다. 이것으로 "data1.html #content"라는 1페이지 파일의 패스를 만들어집니다. load()로 읽어 들여 #content 안에 삽입합니다.

							$("#content").load($("ul.pager li a:first").attr("href")+" #content");
						

다음으로 현재 표시 중인 페이지 번호를 알기 쉽도록 첫 번째 내비게이션 링크(ul.pager li a:first)에 앞에서 정의한 css의 class 속성을 "selected"로 설정합니다.

							$("ul.pager li a:first").addClass("selected");
						

Ajax를 사용한 페이징 처리는 각 페이지의 링크에 click 이벤트를 설정합니다. a 태그에 click 이벤트를 설정하는 경우는 return false;를 잊지 말고 기술하도록 합시다.

click 이벤트에서는 먼저 html()을 이용하여 #content의 내용을 로딩 중 아이콘으로 바꿉니다. 로딩 중 아이콘은 데이터를 읽어 들이는 작업이 끝날 때까지 표시됩니다.

							$("#content").html('

');

다음으로 data()를 사용하여 클릭된 a 태그의 href 속성값을 "file"이라는 이름으로 저장합니다.

							$("#content").data("file",$(this).attr("href"));
						

이어서 animate()로 스크롤 애니매이션을 설정하고 페이지 위쪽으로 화면을 이동시킵니다. animate()의 콜백함수 안에는 load()를 기술하고 #content의 내용을 data("file")에 저장한 패스의 #content와 바꿉니다.

							$('html,body').animate({ scrollTop: $("h1").offset().top-20 }, 'slow','swing',function(){
										$("#content").load($("#content").data("file")+" #content");
							})
						

마지막으로 내비게이션 링크에서 일단 class 속성 "selected"를 제거하고 새롭게 링크된 a 태그에 "selected"를 추가합니다.
이것으로 Ajax를 이용한 부드러운 페이징 처리가 완성되었습니다.

							$("ul.pager li a").removeClass("selected");
							$(this).addClass("selected");
						


** 추가적으로 확인할 문제

상기의 샘플에서 게시물 정보를 외부 HTML로부터 Ajax로 읽어 들여 표시했습니다. 몇 건의 게시물이라면 이 정도의 처리로 문제 없습니다만 대량의 게시물을 취급하는 경우에는 그다지 좋은 방법이라 할 수 없습니다. 오히려 실무에서는 데이터베이스로부터 가져와서 표시하는 경우가 더욱 많을 것입니다. 예를 들어 웹 브라우저로부터 GET 리퀘스트에 대응하는 정보를 송신 가능한 프로그램을 서버에 준비해두고 내비게이션 링크를 아래와 같이 파라미터를 붙인 형태로 변경합니다.

																	
						

이 외에도 XML이나 JSON 등의 데이터를 가져와서 표시하는 경우도 있습니다. 시스템을 담당하는 엔지니어와 상담해가며 상황에 맞도록 유연하게 대응하도록 합시다.