REST방식(9)-댓글페이징처리

댓글의 화면 처리는 다음과 같은 방식으로 처리한다.

1. 게시물을 조회하는 페이지에 들어오면 기본적으로 가장 오래된 댓글들을 가져와서 1페이지에 보여준다.

2. 1페이지의 게시물을 가져올 때 해당 게시물의 댓글의 숫자를 파악해서 댓글의 페이지 번호를 출력한다.

3. 댓글이 추가되면 댓글의 숫자만을 가져와서 최종 페이지를 찾아서 이동

4. 댓글의 수정과 삭제 후에는 다시 동일 페이지를 호출

---

댓글 페이지 계산과 출력

Ajax로 가져오는 데이터가 replyCnt와 list라는 데이터로 구성되므로 이를 처리하는 reply.js의 내용 역시 이를 처리하는 구조로 수정한다.

//	function getList(param, callback, error) {
//
//		var bno = param.bno;
//		var page = param.page || 1;
//
//		$.getJSON("/replies/pages/" + bno + "/" + page + ".json",
//				function(data) {
//					if (callback) {
//						callback(data);
//					}
//				}).fail(function(xhr, status, err) {
//			if (error) {
//				error();
//			}
//		});
//	}
	
	function getList(param, callback, error) {

	    var bno = param.bno;
	    var page = param.page || 1;
	    
	    $.getJSON("/replies/pages/" + bno + "/" + page + ".json",
	        function(data) {
	    	
	          if (callback) {
	            //callback(data); // 댓글 목록만 가져오는 경우 
	            callback(data.replyCnt, data.list); //댓글 숫자와 목록을 가져오는 경우 
	          }
	        }).fail(function(xhr, status, err) {
	      if (error) {
	        error();
	      }
	    });
	  }

callback 에 댓글의 숫자와 목록을 가져오도록 수정만되었다. 간단하다

화면에 대한 처리는 get.jsp 내에서 이루어진다.

댓글의 페이지를 호출하는 부분은 showList 함수이므로 페이지 번호를 출력하도록 수정하자

function showList(page){
console.log("show list " + page);
replyService.getList({bno:bnoValue,page: page|| 1 }, function(replyCnt, list) {
console.log("replyCnt: "+ replyCnt );
console.log("list: " + list);
console.log(list);
if(page == -1){
pageNum = Math.ceil(replyCnt/10.0);
showList(pageNum);
return;
}
var str="";
if(list == null || list.length == 0){
return;
}
for (var i = 0, len = list.length || 0; i < len; i++) {
str +="<li class='left clearfix' data-rno='"+list[i].rno+"'>";
str +="  <div><div class='header'><strong class='primary-font'>["
+list[i].rno+"] "+list[i].replyer+"</strong>"; 
str +="    <small class='pull-right text-muted'>"
+replyService.displayTime(list[i].replyDate)+"</small></div>";
str +="    <p>"+list[i].reply+"</p></div></li>";
}
replyUL.html(str);
showReplyPage(replyCnt);
});//end function
}//end showList

 showList()함수는 파라미터로 전달되는 page변수를 이용해서 원하는 댓글 페이지를 가져오게 됩니다. 이때 만일 page번호가 -1로 전달되면 마지막 페이지를 찾아서 다시 호출하게 됩니다. 사용자가 새로운 댓글을 추가하면 showList(-1)을 호출하여 우선 전체 댓글의 숫자를 파악하게 된다.

이 후 다시 마지막 페이지를 호출해서 이동시키는 방식으로 동작시킨다.

댓글의 숫자들은 화면상에서 댓글이 출력되므로 

댓글이 출력되는 영역의 아랫쪽에

<div class = 'panel-footer'>를 하나 추가하고 <div>의 아래쪽에 추가한다.

<div class='row'>

	<div class="col-lg-12">

		<!-- /.panel -->
		<div class="panel panel-default">
			<!--       <div class="panel-heading">
        <i class="fa fa-comments fa-fw"></i> Reply
      </div> -->

			<div class="panel-heading">
				<i class="fa fa-comments fa-fw"></i> Reply
				<button id='addReplyBtn' class='btn btn-primary btn-xs pull-right'>New
					Reply</button>
			</div>


			<!-- /.panel-heading -->
			<div class="panel-body">

				<ul class="chat">

				</ul>
				<!-- ./ end ul -->
			</div>
			<!-- /.panel .chat-panel -->

			<div class="panel-footer"></div>


		</div>
	</div>
	<!-- ./ end row -->
</div>

추가된 <div class='panel-footer'>에 댓글 페이지 번호를 출력하는 로직은 shoReplyPage()로 이름을 짓고 

아래와 같은 코드를 넣는다.

    var pageNum = 1;
    var replyPageFooter = $(".panel-footer");
    
    function showReplyPage(replyCnt){
      
      var endNum = Math.ceil(pageNum / 10.0) * 10;  
      var startNum = endNum - 9; 
      
      var prev = startNum != 1;
      var next = false;
      
      if(endNum * 10 >= replyCnt){
        endNum = Math.ceil(replyCnt/10.0);
      }
      
      if(endNum * 10 < replyCnt){
        next = true;
      }
      
      var str = "<ul class='pagination pull-right'>";
      
      if(prev){
        str+= "<li class='page-item'><a class='page-link' href='"+(startNum -1)+"'>Previous</a></li>";
      }
      
      for(var i = startNum ; i <= endNum; i++){
        
        var active = pageNum == i? "active":"";
        
        str+= "<li class='page-item "+active+" '><a class='page-link' href='"+i+"'>"+i+"</a></li>";
      }
      
      if(next){
        str+= "<li class='page-item'><a class='page-link' href='"+(endNum + 1)+"'>Next</a></li>";
      }
      
      str += "</ul></div>";
      
      console.log(str);
      
      replyPageFooter.html(str);
    }

showReplyPage()는 기존에 Java로 작성되는 PageMaker의 JS버전에 해당한다. 댓글 페이지를 문자열로 구성한후 

<div>의 innerHTML로 추가한다.

화면을 보면 위와같이 10개까지는 정상적으로 나온다. 이 이후 댓글을 새로 추가한다면

1페이지에서 2페이지가 생성되고, 그 2페이지에 추가한 댓글이 나타나야한다.

댓글을 2개더 추가해보았다. 2개다 정상적으로 2번페이지에 생성되었고, 순서또한 정렬이 잘되어있다.

하지만 1번페이지를 누른다면 보기와 같은 에러가 나온다. 아직 연결을 안해주어서 그렇다.

//showReplyPage()하단에 넣어주자
    replyPageFooter.on("click","li a", function(e){
       e.preventDefault();
       console.log("page click");
       
       var targetPageNum = $(this).attr("href");
       
       console.log("targetPageNum: " + targetPageNum);
       
       pageNum = targetPageNum;
       
       showList(pageNum);
     });

페이지번호를 클릭했으 때 새로운 댓글을 가져오도록 하는 부분이다.

누른 페이지의 번호를 그대로 이용해서 

showList( "누른페이지번호" )로 넘겨주어 메서드를 호출하게 해주는 방식으로 구현했다.

즉 댓글의 페이지 번호는 <a>태그 내에 존재하므로 이벤트 처리에서는 <a>태그의 기본 동작을 제한하고 (preventDefault())댓글 페이지 번호를 변경한 후 해당 페이지의 댓글을 가져오도록 한다.

댓글의 수정또는 삭제가 되었을때도 정상적으로 해당 페이지로 보여주도록 해야한다.

안그러면 계속 1번 페이지로 나타나게 된다. 이것은 깔끔하지않다.

따라서 수정/삭제한 댓글이 포함된 페이지로 이동하도록 수정하자

modalModBtn.on("click", function(e) {
var reply = {
rno : modal.data("rno"),
reply : modalInputReply.val()
};
replyService.update(reply, function(result) {
alert(result);
modal.modal("hide");
showList(pageNum);
//showList(1);
});
});

modalRemoveBtn.on("click", function(e) {
var rno = modal.data("rno");
replyService.remove(rno, function(result) {
alert(result);
modal.modal("hide");
showList(pageNum);
//showList(1);
});
});

기존과 달라진 점은 showList(1)에 1을 넣어 1페이지가 나오도록 했는데 지금은 해당 작업이 처리된 페이지를

showList("page")에 넣어 처리되었다.

브라우저에서 댓글등록, 수정, 삭제 작업은 모두 페이지를 이동하게 된다.

---

이로써 REST방식으로 댓글처리와 페이징을 해보았다. 댓글처리를 할때 REST-Ajax방식을 이용했지만, 이 전단계는 아직 적용하지못했다. 재 복습기간에 게시판에서 페이지로 이동할때 ajax를 이용해서 이동할 수 있도록 해보겠다.

다음영상은 실제 구현되는 화면이다.

---