스프링부트 JPA+jsp(jstl) 페이징 처리 Pageable

이렇게 간단한 거였는데 하루종일 삽질했다..

 

 

<조건>

1. 이전, 다음 말고 페이지 블록 (1 2 3, 4 5 6)으로 나타내고 싶다.

2. 타임리프 말고 jsp에서 jstl로 구현해야한다.

3. Mapper가 아닌 JPA Repository를 사용해야 한다.

4. 검색결과를 반영해서 페이징을 처리하고 싶다.

 

 

Controller

	@GetMapping("/admin/userlist")
	public String userList(Model model,
			@PageableDefault(size = 10, sort = "id", direction = Sort.Direction.DESC) 
			Pageable pageable,
			@RequestParam(required = false, defaultValue = "") String field,
			@RequestParam(required = false, defaultValue = "") String word) {

		Page<User> ulist=userRepository.findAll(pageable);
		if(field.equals("username")) {
			ulist = userRepository.findByUsernameContaining(word, pageable);
		}else if(field.equals("email")){
			ulist = userRepository.findByEmailContaining(word, pageable);
		}
		
		int pageNumber=ulist.getPageable().getPageNumber(); //현재페이지
		int totalPages=ulist.getTotalPages(); //총 페이지 수. 검색에따라 10개면 10개..
		int pageBlock = 5; //블럭의 수 1, 2, 3, 4, 5	
		int startBlockPage = ((pageNumber)/pageBlock)*pageBlock+1; //현재 페이지가 7이라면 1*5+1=6
		int endBlockPage = startBlockPage+pageBlock-1; //6+5-1=10. 6,7,8,9,10해서 10.
		endBlockPage= totalPages<endBlockPage? totalPages:endBlockPage;
		
		model.addAttribute("startBlockPage", startBlockPage);
		model.addAttribute("endBlockPage", endBlockPage);
		model.addAttribute("ulist", ulist);
		
		return "/user/userlist";
	}

 

 

Repository

public interface UserRepository extends JpaRepository<User, Integer>{
    
    // 회원 목록 + 검색
	Page<User> findAll(Pageable pageable);
	Page<User> findByUsernameContaining(String username, Pageable pageable);
	Page<User> findByEmailContaining(String email, Pageable pageable);
    
}

 

 

JSP

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="sec"
	uri="http://www.springframework.org/security/tags"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ include file="/WEB-INF/views/include/header.jsp"%>
<div class="container"><br/>
	<h3 id="font-h3">회원리스트</h3>
	
	<!-- 검색 영역 시작-->
	<form action="/admin/userlist" class="form-inline d-flex justify-content-end"
		method="GET">
		<select name="field" id="field" class="form-control form-control-sm">
			<option value="username">아이디</option>
			<option value="email">이메일</option>
		</select> 
		<input type="text" id="word" name="word" class="form-control form-control-sm"
			style="margin: 10px;"> 
		<input type="submit" class="btn btn-outline-info btn-sm" value="검색">
	</form>
	<!-- 검색 영역 끝 -->

	<!-- 테이블 영역 시작-->
	<table class="table table-hover">
	
	<caption>회원 수: ${ulist.totalElements}</caption><!-- 회원 수 -->
		<tr>
			<th>번호</th>
			<th>아이디</th>
			<th>이메일</th>
			<th>가입일</th>
		</tr>
		<c:forEach items="${ulist.content}" var="user">
			<tr>
				<td>${user.id}</td>
				<td><a href="/admin/view/${user.id}">${user.username}</a></td>
				<td>${user.email}</td>
				<td>${user.createDate}</td>
			</tr>
		</c:forEach>
	</table>
	<!-- 테이블 영역 끝 -->
	
	<!-- 페이징 영역 시작 -->
	<div class="text-xs-center">
		<ul class="pagination justify-content-center">
		
			<!-- 이전 -->
			<c:choose>
				<c:when test="${ulist.first}"></c:when>
				<c:otherwise>
					<li class="page-item"><a class="page-link" href="/admin/userlist/?field=${param.field}&word=${param.word}&page=0">처음</a></li>
					<li class="page-item"><a class="page-link" href="/admin/userlist/?field=${param.field}&word=${param.word}&page=${ulist.number-1}">&larr;</a></li>
				</c:otherwise>
			</c:choose>

			<!-- 페이지 그룹 -->
			<c:forEach begin="${startBlockPage}" end="${endBlockPage}" var="i">
				<c:choose>
					<c:when test="${ulist.pageable.pageNumber+1 == i}">
						<li class="page-item disabled"><a class="page-link" href="/admin/userlist/?field=${param.field}&word=${param.word}&page=${i-1}">${i}</a></li>
					</c:when>
					<c:otherwise>
						<li class="page-item"><a class="page-link" href="/admin/userlist/?field=${param.field}&word=${param.word}&page=${i-1}">${i}</a></li>
					</c:otherwise>
				</c:choose>
			</c:forEach>
			
			<!-- 다음 -->
			<c:choose>
				<c:when test="${ulist.last}"></c:when>
				<c:otherwise>
					<li class="page-item "><a class="page-link" href="/admin/userlist/?field=${param.field}&word=${param.word}&page=${ulist.number+1}">&rarr;</a></li>
					<li class="page-item "><a class="page-link" href="/admin/userlist/?field=${param.field}&word=${param.word}&page=${ulist.totalPages-1}">마지막</a></li>
				</c:otherwise>
			</c:choose>
		</ul>
	</div>
	<!-- 페이징 영역 끝 -->
</div>

 

 

결과

전체리스트

 

검색어 "ad" 를 넣었을때.. 페이지 자동 반영

 

 

+

다른페이지로 이동할때마다 새로고침된다.

비동기 방식으로 머 어떻게 하는건..다음에..