Spring legacy 프로젝트 게시판 만들기(5 - 2)

spring-mvc/board

Spring legacy 프로젝트 게시판 만들기(5 - 2) - 게시판 페이징 view

crone 2021. 6. 21. 15:57

Spring legacy 프로젝트 게시판 만들기(5) - 게시판 페이징

Spring legacy 프로젝트 게시판 만들기(4) - 수정하기 Spring legacy 프로젝트 게시판 만들기(3) - 상세조회 이전글 Spring legacy 프로젝트 게시판 만들기(2) - 전체 조회 이전 글 Spring legacy 프로젝트 게시판..

cronex.tistory.com

Jungsangjin0/spring-board

Contribute to Jungsangjin0/spring-board development by creating an account on GitHub.

github.com

페이징 페이지를 구성하도록 하겠습니다. view는 jsp를 사용하도록 하겠습니다.

BoardController에서 model에 담아 전달한 boardList 와 PageInfoDTO를 사용하도록 하겠습니다.

- board.jsp(페이징 부분)

	<!-- 페이징 -->
			<div style="text-align: center; margin-top: 30px;">
				<c:choose>
					<c:when test="${empty requestScope.searchValue}"> 				<!-- 1 -->
					
						<button id="startPage"><<</button>			  	<!-- 2 -->
						
						<c:if test="${requestScope.pageInfo.pageNo <= 1}">      	<!-- 3 -->
							<button disabled><</button>
						</c:if>
						
						<c:if test="${requestScope.pageInfo.pageNo > 1}">			<!-- 4 -->
							<button id="prevPage"><</button>
						</c:if>

						<c:forEach var="p" begin="${requestScope.pageInfo.startPage}" 
						end="${requestScope.pageInfo.endPage}" step="1">			<!-- 5 -->
						
							<c:if test="${requestScope.pageInfo.pageNo eq p}">		<!-- 6 -->
								<button disabled>
									<c:out value="${p}"></c:out>
								</button>
							</c:if>
							
							<c:if test="${requestScope.pageInfo.pageNo ne p}">		<!-- 7 -->
								<button class="paging-button">
									<c:out value="${p}"></c:out>
								</button>
							</c:if>

						</c:forEach>

						<c:if													
							test="${requestScope.pageInfo.pageNo >= requestScope.pageInfo.maxPage}"> <!-- 8 -->
							<button disabled>></button>
						</c:if>
						
						<c:if
							test="${requestScope.pageInfo.pageNo < requestScope.pageInfo.maxPage}">	  <!-- 9 -->
							<button id="nextPage">></button>
						</c:if>

						<button id="maxPage">>></button>					<!-- 10 -->

					</c:when>
					
					<c:otherwise>

					</c:otherwise>
				</c:choose>
			</div>

1	이 후에 검색을 통한 페이징 때 사용할 조건문
2	"<<" 버튼을 나타낸 것으로 가장 첫 페이지부분으로 이동하는 버튼 (pageNo = 1)
3	"<"을 나타낸 버튼입니다. 조건식으로는 pageNo가 1이거나 1보다 작다면 이 전 페이지는 없는 것이기 때문에(0페이지는없습니다.) 버튼에 disabled 처리를 한 것
4	"<"을 나타낸 버튼입니다. 조건식으로 pageNo가 1보다 크다면 이 전 페이지가 존재하기에 disabled처리하지 않습니다.
5	forEach를 사용하여 시작은 startPage 끝은 endPage로 설정하였습니다. ex) 페이징을 10으로 설정했을 때 startPage : 1, 11, 21, 31... endPage : 10, 20, 30, 40...
6	pageNo와 p가 같다면 버튼을 disabled 시킵니다. 현 페이지(pageNo)를 보고 있기 때문입니다.
7	pageNo와 p가 같지 않다면 버튼을 활성화 시킵니다.
8	">"을 나타낸 버튼입니다. pageNo가 maxPage보다 크거나 같다면 이 후 페이지는 없기 때문에 버튼을 비활성화 합니다.
9	">"을 나타낸 버튼입니다. pageNo가 maxPage보다 작다면 이 후 페이지가 있기 때문에 버튼을 활성화 합니다.
10	">>"을 나타낸 버튼입니다. 가장 끝 페이지 maxPage로 이동합니다.

브라우저에서 페이지를 보게 되면 아래와 같습니다.

이제 버튼을 클릭하면 동작할 수 있도록 js를 구성하도록 하겠습니다.

- board.jsp (js)

	<script type="text/javascript">
	const PAGING_PATH = "${pageContext.servletContext.contextPath}/board";
	$(function(){
		
		$("#startPage").on("click", function(){    //1
			
			location.href = PAGING_PATH + "?currentPage=1";
		})
		
		$("#prevPage").on("click", function(){  //2
			
			location.href = PAGING_PATH + "?currentPage=${reqeustScope.pageInfo.pageNo - 1}";
		})													
		
		$("#nextPage").on("click", function(){  //3
			
			location.href = PAGING_PATH + "?currentPage=${requestScope.pageInfo.pageNo + 1}";
		})
		 
		$("#maxPage").on("click", function(){ //4
			
			location.href = PAGING_PATH + "?currentPage=${requestScope.pageInfo.maxPage}";
		})
		
		$(".paging-button").on("click", function(){ //5
        
			let pageNumber = $(this).text();
			location.href = PAGING_PATH +"?currentPage="+pageNumber;
		})
		
	})
</script>

1	"<<" 버튼을 누르면 currentPage를 1로 설정하여 페이지를 요청합니다.
2	"<" 버튼을 누르면 currentPage를 현재 페이지(pageNo) - 1 을 하여 페이지를 요청합니다.
3	">" 버튼을 누르면 currentPage를 현재 페이지(pageNo) + 1을 하여 페이지를 요청합니다.
4	">>" 버튼을 누르면 currentPage값으로 나타낼 수 있는 page의 끝 값(maxPage)으로 페이지를 요청합니다.
5	"1, 2, 3, 4, 5..." 등을 누르면 해당 페이지(pageNo)값을 currentPage 값으로 설정하여 페이지를 요청합니다.

board.jsp 전체 코드 입니다.

- board.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!-- taglib 추가 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>페이징 게시판</title>
<style type="text/css">
.table>tbody tr:hover {
	background: rgb(200, 200, 200);
	cursor: pointer;
}

.table tr {
	border-bottom: 1px solid #999;
}

.table {
	padding: 30px;
	margin: 0px auto;
	font-size: 20px;
	font-weight: normal;
}

.table thead {
	border-top: 2px solid #666;
}
</style>

</head>
<body>
	<jsp:include page="../common/sidebar.jsp" />
	<div class="content">
		<div style="padding-top : 100px;">
			<table class="table"
				style="border-collapse: collapse; width: 1200px; text-align: center;">
				<colgroup>
					<col width="15%">
					<col width="20%">
					<col width="40%">
					<col width="15%">
				</colgroup>
				<thead>
					<tr>
						<th>번호</th>
						<th>제목</th>
						<th>작성자</th>
						<th>작성일</th>
					<tr>
				</thead>
				<tbody class="board-tbody">
					<!-- forEach로 변경된 body부분 -->
					<c:forEach items="${requestScope.list}" var="board">
						<tr>
							<td>${board.board_id}</td>
							<td>${board.board_title}</td>
							<td>${board.board_writer}</td>
							<td>${board.board_date}</td>
						</tr>
					</c:forEach>
				</tbody>
			</table>
			
			<!-- 페이징 -->
			<div style="text-align: center; margin-top: 30px;">
				<c:choose>
					<c:when test="${empty requestScope.searchValue}"> 				<!-- 1 -->
					
						<button id="startPage"><<</button>			  				<!-- 2 -->
						
						<c:if test="${requestScope.pageInfo.pageNo <= 1}">      	<!-- 3 -->
							<button disabled><</button>
						</c:if>
						
						<c:if test="${requestScope.pageInfo.pageNo > 1}">			<!-- 4 -->
							<button id="prevPage"><</button>
						</c:if>

						<c:forEach var="p" begin="${requestScope.pageInfo.startPage}" 
						end="${requestScope.pageInfo.endPage}" step="1">			<!-- 5 -->
						
							<c:if test="${requestScope.pageInfo.pageNo eq p}">		<!-- 6 -->
								<button disabled>
									<c:out value="${p}"></c:out>
								</button>
							</c:if>
							
							<c:if test="${requestScope.pageInfo.pageNo ne p}">		<!-- 7 -->
								<button class="paging-button">
									<c:out value="${p}"></c:out>
								</button>
							</c:if>

						</c:forEach>

						<c:if													
							test="${requestScope.pageInfo.pageNo >= requestScope.pageInfo.maxPage}"> <!-- 8 -->
							<button disabled>></button>
						</c:if>
						
						<c:if
							test="${requestScope.pageInfo.pageNo < requestScope.pageInfo.maxPage}">	  <!-- 9 -->
							<button id="nextPage">></button>
						</c:if>

						<button id="maxPage">>></button>											<!-- 10 -->

					</c:when>
					
					<c:otherwise>

					</c:otherwise>
				</c:choose>
			</div>
		</div>
	</div>
	<!-- detail 페이지 이동 js -->
	<script type="text/javascript">
	const PAGING_PATH = "${pageContext.servletContext.contextPath}/board";
	$(function(){
		
		/*list에서 게시물 클릭 시 해당 게시물 상세 페이지로 이동*/
		$(".board-tbody > tr").on("click", function(){
			let number = $(this).children().eq(0).text(); /*board number*/
			location.href = "${pageContext.servletContext.contextPath}/board/" + number;
		})
		
		$("#startPage").on("click", function(){
			
			location.href = PAGING_PATH + "?currentPage=1";
		})
		
		$("#prevPage").on("click", function(){
			
			location.href = PAGING_PATH + "?currentPage=${reqeustScope.pageInfo.pageNo - 1}";
		})													
		
		$("#nextPage").on("click", function(){
			
			location.href = PAGING_PATH + "?currentPage=${requestScope.pageInfo.pageNo + 1}";
		})
		
		$("#maxPage").on("click", function(){
			
			location.href = PAGING_PATH + "?currentPage=${requestScope.pageInfo.maxPage}";
		})
		
		$(".paging-button").on("click", function(){
			let pageNumber = $(this).text();
			location.href = PAGING_PATH +"?currentPage="+pageNumber;
		})
		
	})
</script>
</body>
</html>

이제 실행시켜서 브라우저에서 확인해 보면 잘 동작하는 것을 확인할 수 있습니다.