AJAX로 페이징 구현하기

순서:

1) 매퍼(SQL문)

2) DAO

3) 컨트롤러

4) 페이징.jsp

5) 뷰.jsp

1) 매퍼(SQL문)

<select id="selectAllComments" resultType="com.spring.vo.Comments">
<![CDATA[
         SELECT * FROM (
            SELECT * FROM (
               SELECT ORDER_COMMENTS.*, ROWNUM row_num FROM (
                  SELECT c.*, m.id mem_id, m.name mem_name 
                     FROM COMMENTS c LEFT JOIN MEMBER m 
                     ON c.mem_num = m.num
                     WHERE board_num = #{board_num}
                     ORDER BY c.num DESC
                     )ORDER_COMMENTS
                  )PAGING_COMMENTS WHERE row_num >= #{paging.startNum}
               ) WHERE row_num <= #{paging.endNum}
      ]]>
</select>

//코멘트 숫자(페이지수 정하기 위한)
<select id="totalCount" resultType="int">
      SELECT count(*) FROM COMMENTS WHERE board_num = #{board_num}
</select>

2) DAO

CommentsDao.java

public List<Comments> list(Map map){
        return sqlSession.selectList(CommentsMapper+".selectAllComments", map);
    }
    
    public int totalCount(int board_num) {
        return sqlSession.selectOne(CommentsMapper+".totalCount",board_num);
    }

3) 컨트롤러

CommentsRestController.java

@RequestMapping(value="{board_num}/{page}")
    public ResponseEntity<Map<String,Object>> list(@PathVariable("board_num") int board_num,
            @PathVariable("page") int page){
        //ResponseEntity 쓰면 list는물론 HttpStatus(접속 상태)도 같이 보낼 수 있다.
        ResponseEntity<Map<String,Object>> entity = null;
        Paging paging = new Paging();
        paging.setPage(page);
        paging.setTotalCount(dao.totalCount(board_num));
        try{
            Map<String,Object> map = new HashMap<String,Object>();
            //map 구조: {board_num:1, paging:{startNum:1, endNum:10,...}, list:{} }
            map.put("paging", paging);
            map.put("board_num", board_num);
            map.put("list", dao.list(map));
            entity = new ResponseEntity<Map<String,Object>>(map,HttpStatus.OK);
        }catch(Exception e){
            entity = new ResponseEntity<Map<String,Object>>(HttpStatus.BAD_REQUEST);
        }
        return entity;
    }

4) 페이징.jsp

scriptPaging.jsp

<c:url var="action" value="${param.action}"/>
<c:if test="${param.prev}">
<a href="javascript:${action}(${param.begin-1})">prev</a>
</c:if>
<c:forEach begin="${param.begin}" end="${param.end}" step="1" var="index">
   <c:choose>
      <c:when test="${param.page == index}">
         ${index}
      </c:when>
      <c:otherwise>
         <a href="javascript:${action}(${index})">${index}</a>
      </c:otherwise>
   </c:choose>
</c:forEach>
<c:if test="${param.next}">
<a href="javascript:${action}(${param.end+1})">next</a>
</c:if>

5) 뷰.jsp

Comments.jsp

var contextPath ="${requestScope['javax.servlet.include.context_path']}";
var loadComments = function(page_param){//ajax 구현
   var page = null;
   if(page_param){
       page = page_param;
   }else{
       page = 1;
   }
   var http;
   var url = contextPath+"/comments/${param.board_num}/"+page;
   if(window.XMLHttpRequest){
      http=new XMLHttpRequest();
   }else if(window.ActiveXObject){
      http=new ActiveXObject("Microsoft.XMLHTTP");
   }
   http.onreadystatechange = function(){
      if(this.readyState==4 && this.status==200){
         var comlist = JSON.parse(this.responseText);
         commentList(comlist.list);
         pagingLoad(comlist.paging);
      }else if(this.status == 400){
          alert("comments를 읽어오지 못했습니다.");
      }
   }
   http.open("GET",url,true);
   http.send();
   console.log("통신완료!");
}

//콜백함수1(코멘트 목록)
function commentList(comlist){
   var tableList = document.querySelector("#commentsList .list");
   var htmlList = "";
   for(var i=0;i<comlist.length;i++){
      htmlList +="<tr>";
      htmlList +="<td>"+comlist[i]["num"]+"</td>";
      htmlList +="<td>"+comlist[i]["mem_num"]+"</td>";
      htmlList +="<td>"+comlist[i]["mem_id"]+"</td>";
      htmlList +="<td>"+comlist[i]["mem_name"]+"</td>";
      htmlList +="<td>"+comlist[i]["content"]+"</td>";
      htmlList +="<td>"+comlist[i]["indate"]+"</td>";
      htmlList +="<td><a href='javascript:deleteComments("+comlist[i]["num"]+")'>삭제</a></td>";
      htmlList +="</tr>";
   }
   tableList.innerHTML = htmlList;
}

//콜백함수2(페이지 목록)
var pagingLoad = function(pagingJson){
       var pagingDiv = document.querySelector("#pagingDiv");
       var http;
       if(window.XMLHttpRequest){
              http=new XMLHttpRequest();
           }else if(window.ActiveXObject){
              http=new ActiveXObject("Microsoft.XMLHTTP");
           }
       var url = contextPath+"/paging/scriptPaging";
       url+= "?action=loadComments";
       url+= "&page="+pagingJson["page"];
       url+= "&begin="+pagingJson["beginPage"];
       url+= "&end="+pagingJson["endPage"];
       url+= "&prev="+pagingJson["prev"];
       url+= "&next="+pagingJson["next"];
       http.onreadystatechange = function(){
          if(this.readyState==4 && this.status==200){
             var pagingHtml = this.responseText;
             pagingDiv.innerHTML = pagingHtml;
          }
       }
       http.open("GET",url,true);
       http.send();
    }