[Spring] 페이징 화면 처리 - 2 -

[Spring] 페이징 화면 처리 - 2 - 

 

이전 글

2021.07.17 - [Spring] - [Spring] 페이징 화면 처리 - 1 -

 

이전 글에서는 페이징 화면 처리를 위해 필요한 정보들과 그 정보들을 구하는 계산식 등에 대해 알아보았습니다.

이전 글의 내용을 바탕으로 이번 글에서는 '페이징 처리를 위한 클래스 설계' , 'JSP에서 페이지 번호 출력' 등에 대해 알아보겠습니다.

 

페이징 처리를 위한 클래스 설계

화면에 페이징 처리를 위해 여러 정보가 필요하다면 클래스를 구성해서 처리하는 방식도 꽤 편한 방식이 될 수 있습니다. 클래스를 구성하면 Controller 계층에서 JSP 화면에 전달할 때에도 객체를 생성해서 Model에 담아 보내는 과정이 단순해지는 장점도 있습니다.

 

com.project.domian 패키지에 PageDTO 클래스를 설계합니다.

PageDTO 클래스

PageDTO는 생성자를 정의하고 Criteria와 전체 데이터 수(total)를 파라미터로 지정합니다. Criteria 안에는 페이지에서 보여주는 데이터 수(amount)와 현재 페이지 번호(pageNum)를 가지고 있기 때문에 이를 이용해서 필요한 모든 내용을 계산할 수 있습니다. (이해하기 어렵다면 이전 글을 참고해주세요^^)

 

BoardController에서는 PageDTO를 사용할 수 있도록 Model에 담아서 화면에 전달해 줄 필요가 있습니다. 메서드를 다음과 같이 수정합니다.

 

BoardController 클래스

list( )는 'pageMaker'라는 이름으로 PageDTO 클래스에서 객체를 만들어서 Model에 담아줍니다. PageDTO를 구성하기 위해서는 전체 데이터 수가 필요한데, 아직 그 처리가 이루어지지 않아 임의의 값으로 123을 지정했습니다.

 

JSP에서 페이지 번호 출력

JSP에서 JSTL을 이용해 페이지 번호를 출력합니다.  게시물 Table 태그 아래에 다음 코드를 추가하였습니다.

 

list.jsp의 일부

</table>
<!-- /.table-responsive -->

	<div class='pull-right'>
		<ul class="pagination">

			<c:if test="${pageMaker.prev}">
				<li class="paginate_button previous">
					<a href="#">Previous</a>
				</li>
			</c:if>

			<c:forEach 
				var="num" 
				begin="${pageMaker.startPage }"
				end="${pageMaker.endPage }">
				<li class="paginate_button">
					<a href="#">${num }</a>
				</li>
			</c:forEach>

			<c:if test="${pageMaker.next}">
				<li class="paginate_button next">
					<a href="#">Next</a>
				</li>
			</c:if>
		</ul>
		<!-- /.pagenation -->
	</div>
	<!-- /.pull-right -->

부트 스트랩을 이용하는 경우 아래 사이트 함께 참고!

https://getbootstrap.com/docs/4.0/components/pagination/

 

pageNum 파라미터에 페이지 번호 값을 넣고 테스트합니다.

 

페이지 번호 이벤트 처리

화면에 페이지 번호가 보이지만 아직 페이지 번호를 클릭했을 때 이벤트 처리가 남아있습니다. 일반적으로 <a> 태그의 href 속성을 이용하는 방법을 사용할 수도 있지만, 직접 링크를 처리하는 방식의 경우 검색 조건이 붙고 난 후에 처리가 복잡하게 되므로 JavaScript를 통해서 처리하는 방식을 이용합니다.

 

우선 페이지와 관련된 <a> 태그의 href 속성값으로 페이지 번호를 가지도록 수정합니다. 

 

list.jsp의 일부

이제 화면에서는 <a> 태그는 href 속성값으로 단순히 번호만 갖게 변경됩니다. 이 상태의 URL은 존재하지 않기에 문제가 생깁니다.

 

<a> 태그가 원래 동작을 못하도록 Javascript 처리를 하고, 실제 페이지를 클릭하면 동작하는 부분은 별도의 <form> 태그를 이용해 처리하도록 합니다.

 

list.jsp의 일부, 코드 추가

기존에 동작하던 Javascript 부분은 아래와 같이 기존의 코드에 페이지 번호를 클릭하면 처리하는 부분이 추가됩니다.

 

list.jsp의 일부

 

브라우저에서 페이지 번호를 클릭하면 화면에서 제대로 이동이 되는지 확인합니다.

 

조회 페이지로 이동

아직 개선해야 될 부분이 있습니다. 위 이미지처럼 12페이지의 게시글을 보고 다시 목록으로 돌아왔을 때는 1페이지 목록 페이지로 이동하는 증상이 일어납니다. 이를 해결하기 위해 조회 페이지로 갈 때 현재 목록 페이지의 pageNum과 amount를 같이 전달해야 합니다. 페이지 이동에 사용했던 <form> 태그에 추가로 게시물의 번호를 같이 전송하고, action 값을 조정해서 처리할 수 있습니다.

 

list.jsp의 일부 기존 코드

 

href 속성에는 해당 게시물 번호만 갖도록 하고, 이벤트 처리를 위해 클래스 "move"를 추가했습니다.

list.jsp의 일부 수정 코드

 

 

게시물 목록에서 현재 페이지를 담아 가도록 javascript 코드를 추가했습니다.

list.jsp의 일부

게시물 제목을 클릭하면 <form> 태그에 추가로 seq_bno 값을 전송하기 위해 <input> 태그를 만들어 추가하고, <form> 태그의 action은 '/board/get'으로 변경합니다. 위 처리가 정상적으로 되었다면 게시물의 제목을 클릭했을 때 pageNum과 amount 파라미터를 추가로 전달되는 것을 볼 수 있습니다.

 

url 확인

 

조회 페이지에서 다시 목록 페이지로 이동 - 페이지 번호 유지

조회 페이지에 다시 목록 페이지로 이동하기 위한 파라미터들이 같이 전송되었다면 조회 페이지에서 목록으로 이동하기 위한 이벤트를 처리해야 합니다. BoardController의 get( ) 메서드는 원래는 게시물의 번호만 받도록 처리되어 있었지만, 추가적인 파라미터가 붙으면서 Criteria를 파라미터로 추가해서 받고 전달합니다.

 

BoardController 클래스의 일부

@ModelAttribute는 자동으로 Model에 데이터를 지정한 이름으로 담아줍니다. @ModelAttribute를 사용하지 않아도 Controller에서 화면으로 파라미터가 된 객체는 전달이 되지만, 좀 더 명시적으로 이름을 지정하기 위해 사용합니다.

 

기존 get.jsp에서는 버튼을 클릭하면 <form> 태그를 이용하는 방식이었으므로 필요한 데이터를 추가해서 이동하도록 수정합니다.

 

get.jsp의 일부

get.jsp는 operForm이라는 id를 가진 <form> 태그를 이미 이용했기 때문에 cri라는 이름으로 전달된 Criteria 객체를 이용해서 pageNum과 amount 값을 태그로 구성하고 버튼을 클릭했을 때 정상적으로 목록 페이지로 이동하게 처리합니다.

실제 동작은 아래 그림과 같이 pageNum과 amount 값이 정상적으로 이동되어야 합니다.

이렇게 해서 목록 페이지와 조회 페이지를 왔다 갔다 할 때 페이지 번호가 유지되어 이전에 봤던 목록 페이지를 다시 볼 수 있도록 처리할 수 있습니다.

 

 

---

내용이 많이 길어졌네요.

 

오늘은 스프링과 JSP에서 페이징 화면 처리를 하는 방법에 대해 알아보았습니다