◎ 페이징 화면 처리
▷ 화면 밑에 페이지 번호를 표시하고 사용자가 페이지 번호를 클릭할 수 있게 처리
▶ 브라우저 주소창에서 페이지 번호를 전달해서 결과를 확인하는 단계
▶ JSP에서 페이지 번호를 출력하는 단계
▶ 각 페이지 번호에 클릭 이벤트 처리
▶ 전체 데이터 개수를 반영해서 페이지 번호 조절
1. 페이징 처리시 필요한 정보들
▷ 현재 페이지 번호(page)
▷ 이전과 다음으로 이동 가능한 링크의 표시 여부(prev, next)
▷ 화면에서 보여지는 페이지의 시작 번호와 끝 번호(startpage, endPage)
(1) 끝 페이지 번호, 시작 페이지 번호
▷ 페이징 처리를 위해 현재 사용자가 보고 있는 페이지의 정보가 중요
▷ 끝 번호를 먼저 계산해 두는 것이 수월함
◎ 페이지 끝 번호(endPage) 계산
this.endPage = (int)(Math.ceil(페이지번호 / 10.0)) * 10;
◎ Math.ceil() 이용시
▷ 1페이지 : Math.ceil(0.1) * 10 = 10
▷ 10페이지 : Math.ceil(1) * 10 = 10
▷ 11페이지 : Math.ceil(1.1) * 10 = 20
◎ 페이지 시작 번호(startPage) 계산
this.startPage = this.endPage - 9;
끝 번호는 전체 데이터 수에 의해 영향을 받는데 10개씩 페이지를 보여줄 경우 전체 데이터 수가 80개라면 끝 번호는 8이 되어야 함
◎ total을 통한 endPage의 재계산
realEnd = (int) (Math.ceil((total * 1.0) / amount) ); if(realEnd < this.endPage){ this.endPage = realEnd; }
전체 데이터 수(total)를 이용해 진짜 끝 페이지(realEnd)가 몇 번까지 되는지 계산
진짜 끝 페이지(realEnd)가 구해둔 끝 번호(endPage)보다 작다면 끝 번호는 작은 값이 되어야 함
◎ 이전(prev) 계산
this.prev = this.startPage > 1;
시작 번호가 1보다 큰 경우라면 존재함
◎ 다음(next) 계산
this.next = this.endPage < realEnd;
realEnd가 끝 번호(endPage)보다 큰 경우에만 존재함
2. 페이징 처리를 위한 클래스 설계
▷ 클래스를 구성하면 Controller 계층에서 JSP 화면에 전달할 때 객체를 생성해 Model에 담아 보내는 과정이 단순해짐
◎ PageDTO 클래스 생성
package org.codehows.domain; import lombok.Getter; import lombok.ToString; @Getter @ToString public class PageDTO { private int startPage; // 페이징 시작 번호 private int endPage; // 페이징 끝 번호 private boolean prev, next; // 이전 페이지, 다음 페이지 private int total; // 전체 데이터 개수 private Criteria cri; // 현재 페이징 번호, 한페이지에 표시할 개수 public PageDTO(Criteria cri, int total) { this.cri = cri; this.total = total; this.endPage = (int)(Math.ceil(cri.getPageNum()/10.0))*10; this.startPage = this.endPage - 9; int realEnd = (int) (Math.ceil((total * 1.0)/cri.getAmount())); if (realEnd < this.endPage) { this.endPage = realEnd; } this.prev = this.startPage > 1; // 현재 페이징 시작 번호가 1보다 크다면 이전버튼(true) this.next = this.endPage < realEnd; // 현재 페이징 끝 번호가 전체 끝보다 작다면 다음버튼(true) } }
◎ BoardController 클래스의 list() 메소드 수정
▷ Model에 담아 화면에 전달
▷ src/main/java/org/codehows/controller → BoardController 클래스 수정
...(생략)... @GetMapping("/list") public void list(Criteria cri, Model model) { log.info("list : " + cri); model.addAttribute("list", service.getList(cri)); model.addAttribute("pageMaker", new PageDTO(cri, 123)); } ...(생략)...
▷ PageDTO 클래스에 객체를 만들어 Model에 담아줍니다.
▷ PageDTO 구성을 위해 전체 데이터 수가 필요한데 아직 지정되지 않아 임의로 123을 지정했습니다.
3. JSP 페이지 번호 출력
▷ JSTL을 통해 페이지 번호를 출력할 수 있음
▷ SB Admin2는 부트 스트랩 기반으로 구성되어 있으므로 관련 링크들에 필요한 예제들이 존재
▷ SB Admin2의 pages 폴더 → tables.html 페이지의 페이지 처리를 이용해서 구성
<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 previous"><a href="#">Next</a></li> </c:if> </ul> </div>
http://localhost:8080/board/list?pageNume=5
위의 주소로 접속하면 아래와 같이 5페이지가 나타납니다.
만약 아래와 같이 페이지 수를 지정해주면 5페이지의 20개가 출력됩니다.
http://localhost:8080/board/list?pageNume=5 & amount=20
(1) 페이지 번호 이벤트 처리
▷ 페이지 번호를 클릭했을 때 이벤트 처리를 해야함
▷ <a> 태그의 href 속성을 이용해도 되지만 직접 링크를 처리하면 검색 조건이 붙고난 후 처리가 복잡해
JavaScript를 통해서 처리
◎ list.jsp 수정
▷ 우선 href 이용해서 처리
<div class='pull-right'> <ul class="pagination"> <c:if test="${pageMaker.prev}"> <li class="paginate_button previous"><a href="${pageMaker.startPage -1}">Previous</a></li> </c:if> <c:forEach var="num" begin="${pageMaker.startPage}" end="${pageMaker.endPage}"> <li class="paginate_button ${pageMaker.cri.pageNum == num ? "active": "" } "> <a href="${num}">${num}</a> </li> </c:forEach> <c:if test="${pageMaker.next}"> <li class="paginate_button next"><a href="${pageMaker.endPage + 1}">Next</a></li> </c:if> </ul> </div>
▷ 이제 화면에서 <a> 태그는 href 속성 값으로 단순히 번호만을 가지게 변경
▷ 페이지 번호를 클릭하면 해당 URL이 존재하지 않으므로 문제가 생기게 됩니다.
◎ <a> 태그가 원래 동작을 하지 못하도록 JavaScript 처리
▷ list.jsp 내용 추가(pull-right div 밑에 추가)
<form id='actionForm' action="/board/list" method='get'> <input type='hidden' name='pageNum' value='${pageMaker.cri.pageNum}'> <input type='hidden' name='amount' value='${pageMaker.cri.amount}'> </form>
◎ java Script 부분 마지막 부분에 내용 추가...(생략)... var actionForm = $("#actionForm"); $(".paginate_button a").on("click", function(e) { e.preventDefault(); console.log('click'); actionForm.find("input[name='pageNum']").val($(this).attr("href")); }); ...(생략)...
수정 후 페이지 버튼을 누르면 다른 페이지로 넘어가는 것을 확인할 수 있습니다.
http://localhost:8080/board/list
화면 밑에 페이지 번호를 표시하고 사용자가 페이지 번호를 클릭할 수 있게 처리하는 방법에 대해 배워보았습니다.
페이지 번호를 선택하면 해당 페이지의 글들을 출력할 수 있도록 만들 수 있었습니다.
다음 글에서도 페이지 번호를 표시하는 것을 해볼게요!!
많은 분들의 피드백은 언제나 환영합니다! 많은 댓글 부탁드려요~~
'BackEnd > Spring' 카테고리의 다른 글
[코드로 배우는 스프링 웹 프로젝트] ch15 검색 처리 1(sql, MyBatis 동적 태그) (0) | 2023.03.31 |
---|---|
[코드로 배우는 스프링 웹 프로젝트] ch14 페이징 화면 처리 2(script, get, modify) (0) | 2023.03.31 |
[코드로 배우는 스프링 웹 프로젝트] ch13 MyBatis와 스프링에서 페이징 처리(Criteria) (0) | 2023.03.29 |
[코드로 배우는 스프링 웹 프로젝트] ch12 오라클 데이터베이스 페이징 처리 2(hint, rownum) (0) | 2023.03.29 |
[코드로 배우는 스프링 웹 프로젝트] ch12 오라클 데이터베이스 페이징 처리 1 (0) | 2023.03.29 |