[스프링] 프로젝트 - 게시판 페이징 처리(댓글 편)

[관련 게시글]

• 댓글 리스트 출력
• 댓글 수정하기
• 댓글 삭제하기

 

import lombok.Getter;
import lombok.Setter;

@Getter
@Setter
public class Paging {

	private int currentPage = 1;
   	private int rowPage = 10;
	private int pageBlock = 10;			
	private int start;
    	private int end;
	private int startPage;
    	private int endPage;
	private int total;
    	private int totalPage;
	
	
	//생성자
	public Paging(int total, String currentPage1) {
		this.total = total;
        
		if(currentPage1 != null) {
			this.currentPage = Integer.parseInt(currentPage1);
		}
        
		start = (currentPage - 1) * rowPage + 1; 		 //시작시 1	11
		end = start + rowPage - 1;				 //시작시 10	20
		totalPage = (int) Math.ceil((double)total / rowPage); 	 //시작시 2
		startPage = currentPage - (currentPage - 1) % pageBlock; //시작시 1
		endPage = startPage + pageBlock - 1;
        
		if(endPage > totalPage) {
			endPage = totalPage;
		}
        
	}
	
}

paging 설명 게시글

 

 

[Model(DTO)]

import java.sql.Timestamp;

import lombok.Getter;
import lombok.Setter;
import lombok.ToString;

@Getter
@Setter
@ToString
public class CommentModel {

	...
	
	
	//조회용
	...
	private int start;			//Paging 처리의 시작 페이지
	private int end;			//Paging 처리의 끝 페이지
	
	
}

 

 

 

 

[Controller]

	@RequestMapping(value="commentList")
	public String commentList(..., String currentPage, ...) { 

		...

		//페이징 처리
		Paging pg = new Paging(c_total, currentPage);
		SHcommentModel.setStart(pg.getStart());   // 시작시 1
		SHcommentModel.setEnd(pg.getEnd());       // 시작시 10
		
		...
        
		model.addAttribute("c_total", c_total);		//댓글의 총 페이지
		model.addAttribute("pg",pg);			//paging 정보를 담은 객체
		
		return "Review/commentListSH";
	}

 

[service]

...

 

[Dao]

...

 

[Mapper]

	<select id="SH_commentList" parameterType="CommentModel" resultType="CommentModel">
	
		<![CDATA[
	 	    SELECT *
			FROM (
			        SELECT rownum rn ,  a.*
			        FROM  (...) a
			     )
			WHERE  rn >= #{start} 
			AND    rn <= #{end}
		 ]]>	
			
	</select>

 

[View]

    <div>
        <c:set var="num" value="${pg.total-pg.start+1}"></c:set>

            <table>
                <c:forEach var="list" items="${commentList}" varStatus="status">

                    <tr id="cno1${status.index}" class="border-top pb-2 mb-0">

                        <td>${list.nickName}&emsp;|&emsp;${list.c_date}</td>
                        <td><input type="hidden" value="${list.r_no}"></td>
                        <td><input type="hidden" id="cnoNo${status.index}" value="${list.cno}"></td>

                        <td class="col-sm-1">
                            <c:choose>
                                <c:when test="${sessionScope.sessionId==list.id}">
                                <a class="modify-mode-none" href="#" id="edit${status.index}" onclick="commentEdit(${status.index}); return false;">수정</a>
                                </c:when>
                            </c:choose>
                        </td>
                        <td class="col-sm-1">
                            <c:choose>
                                <c:when test="${sessionScope.sessionId==list.id}">
                                	<a  href="#" onclick="commentDeleteCheck(${status.index})">삭제</a>
                                </c:when>
                            </c:choose>
                        </td>
					</tr>

                    <!-- 기존에 등록된 댓글 -->
                    <tr id="cno2${status.index}">
                        <td class="col-sm-10">
                            <div id="modifyScr2">
                            	${list.c_content}
                            </div>
                        </td>
                    </tr>

                    <!-- 수정할 댓글 -->
                    <tr id="cno3${status.index}" style="display: none;">		
                        <td>	
                            <c:choose >
                                <c:when test="${sessionScope.sessionId==list.id}">
                                    <div class="row">
                                        <div class="col-sm-10">
                                            <textarea mexlength="300" id="c_contentEdit${status.index}" class="form-control" rows="2" cols="100" placeholder="댓글을 입력해 주세요">${list.c_content}</textarea>
                                        </div>

                                        <div class="col-sm-2">
                                            <a href="" onclick="commentRealEdit(${status.index}); return false;">등록</a>
                                        </div>
                                    </div>
                                </c:when>
                            </c:choose>
                        </td>
                    </tr>

                    <c:set var="num" value="${num - 1}"></c:set>
                </c:forEach>
            </table>
        </div>

        <c:if test="${pg.startPage > pg.pageBlock }">
        <a href="" onclick="listComment(${pg.startPage-pg.pageBlock}); return false;">⬅︎</a>
        </c:if>

        <c:forEach var="i" begin="${pg.startPage}" end="${pg.endPage}">
        <a href="" onclick="listComment(${i}); return false;">[${i}]</a>
        </c:forEach>

        <c:if test="${pg.endPage < pg.totalPage }">
        <a href="" onclick="listComment(${pg.startPage+pg.pageBlock}); return false;">➡︎︎</a>
        </c:if>
    </div>

다음 페이지의 링크를 비동기식으로 진행해야 하기때문에, 링크 대신 ajax를 사용하여 다음 페이지를 보여줄 수 있도록 함

 

 

[View][Ajax]

/* 댓글 리스트 출력 */
function listComment(Vnum){

    var num = Vnum;

    $.ajax({
        type : 'post',
        url : "${pageContext.request.contextPath}/commentList?r_no=${reviewDetail.r_no}&currentPage="+num,

        success : function(data){
            $("#Commentlist").html(data);	//이전 내용을 지우고 HTML 태그를 포함하여 선택한 요소 안의 새로운 내용을 넣습니다				
        }
    });
 }