LEARN

스프링부트 블로그 만들기 – 페이징

 

스프링부트 블로그 만들기 – 페이징

페이징

1.페이징 처리를 하기위해 index 파일의 경로에 페이징을 추가한다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<% 
  //response.sendRedirect("/board?page=0"); 
  //request.getRequestDispatcher("/board?page=0").forward(request, response); //post방식 주소전달 
%>

<script>

  location.href="/board?page=0";

</script>
/ 경로만으로도 index.jsp 파일로 이동하게 되요.
데이터 소스에서 naming 옵션을 추가로 인해 테이블명이 대문자로 변경되는 경우 테이블 명을 따로 지정해주세요.

User.java -> @Table(name = “user”)

Board.java -> @Table(name = “board”)

2.페이징에 필요한 데이터를 BoardController.java의 list 메서드에 추가한다.
//메인페이지 = 게시글 목록페이지
@GetMapping("/board")
public String list(Model model, int page) {
  
  //페이징
  PageRequest pageRequest = PageRequest.of(page, 3, Sort.by(Direction.DESC, "id"));
  Page<Board> boardsEntity = boardRepository.findAll(pageRequest);
  
  model.addAttribute("boardsEntity",boardsEntity);
  return "board/list";
}
3.페이징 처리를 하기위한 UI를 list.jsp 파일에 추가하여 BoardController에서 만들어둔 메서드를 사용하여 데이터 바인딩해준다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>

<%@ include file="../layout/header.jsp"%>


<div class="container">

  <!-- var는 pageScope에 저장 -->
  <c:forEach var="board" items="${boardsEntity.content}">
    <!-- 카드 글 시작 -->
    <div class="card">
      <div class="card-body">
        <!-- el표현식은 변수명을 적으면 자동으로 get함수를 호출해준다. -->
        <h4 class="card-title">${board.title}</h4>
        <a href="/board/${board.id}" class="btn btn-primary">상세보기</a>
      </div>
    </div>
    <br>
    <!-- 카드 글 끝 -->
  </c:forEach>

  <!-- disabled -->
  <ul class="pagination d-flex justify-content-center">
    <c:choose>
      <c:when test="${boardsEntity.first}">
        <li class="page-item disabled"><a class="page-link"
          href="/board?page=${boardsEntity.number - 1}">Prev</a></li>
      </c:when>
      <c:otherwise>
        <li class="page-item"><a class="page-link"
          href="/board?page=${boardsEntity.number - 1}">Prev</a></li>
      </c:otherwise>
    </c:choose>

    <c:choose>
      <c:when test="${boardsEntity.last}">
        <li class="page-item disabled"><a class="page-link"
          href="/board?page=${param.page + 1}">Next</a></li>
      </c:when>
      <c:otherwise>
        <li class="page-item"><a class="page-link"
          href="/board?page=${param.page + 1}">Next</a></li>
      </c:otherwise>
    </c:choose>
  </ul>
  
</div>

<%@ include file="../layout/footer.jsp"%>

페이징에 사용한 부트스트랩 소스 코드 바로가기

RELATED POST