스프링부트+jsp로 배달사이트 만들기-20 주문목록 수정/페이징

orderList메서드의 urimapping을 페이지 이동을 위해 하나 더 추가 합니다

@GetMapping({"/orderList", "/orderList/{page}"})

@PathVariable을 받을 타입을 int로 하게 되면 page부분이 없을경우 에러가 나게 됩니다 그래서 Integer로 null도 받을 수 있게하고 필수 입력을 false로 설정합니다

 

orderList메서드를 page와 함께 넘길 수 있게 변경하고 model에도 페이지정보를 담습니다

@GetMapping({"/orderList", "/orderList/{page}"})
public String orderList(@AuthenticationPrincipal LoginService user, Model model, @PathVariable(required = false) Integer page) {
    if (user == null) {
        System.out.println("비로그인");
    } else {
        System.out.println("로그인");
        long userId = user.getUser().getId();

        Page p = new Page(page);
        List<OrderList> orderList = orderService.orderList(userId, p);

        if (orderList.size() == 0) {
            return "order/orderList";
        }

        List<List<Cart>> cartList = new ArrayList<>();

        for (int i=0;i<orderList.size();i++) {
            cartList.add(FoodInfoFromJson.foodInfoFromJson(orderList.get(i).getFoodInfo()));
        }
        
        model.addAttribute("page", p);
        model.addAttribute("user", user.getUser());
        model.addAttribute("cartList", cartList);
        model.addAttribute("orderList", orderList);
    }

    return "order/orderList";
}

 

OrderService

List<OrderList> orderList(long userId, Page p);

 

OrderServiceImp

	@Override
	public List<OrderList> orderList(long userId, Page p) {
		Map<String, Object> map = new HashMap<>();
		map.put("userId", userId);
		map.put("firstList", p.getFirstList());
		map.put("lastList", p.getLastList());
		
		System.out.println("첫번째 목록 = " + p.getFirstList() + " 마지막 목록 = " + p.getLastList());
		System.out.println("첫번째 = " + p.getFirstPage() + " 마지막 = " + p.getLastPage() );
		System.out.println("이전페이지 = " + p.getPrevPage());
		System.out.println("다음페이지 = " + p.getNextPage());
		return orderDAO.orderList(map);
	}

 

Page

@Getter
@ToString
public class Page {
	private int view = 10;	// 화면에 출력할 목록 수	
	private int firstList;	// 페이지 첫번째 목록
	private int lastList;	// 페이지 마지막 목록
	
	private int pageCount = 5;	// 페이지 이동 버튼 갯수
	private int firstPage;	// 화면의 첫번째 페이지  1~5 => 1, 6~10 => 6
	private int lastPage;	// 화면의 마지막 페이지  1~5 => 5, 6~10 => 10
	private int prevPage;	// 이전페이지 버튼클릭
	private int nextPage;	// 다음페이지 버튼클릭
	private int nowPage;	// 현재페이지
	
	
	public Page() {
		this(1);
	}
	
	public Page(int movePage) {
		page(movePage, view);
	}
	
	public Page(int movePage, int view) {
		page(movePage, view);
	}
	
	public Page(Integer page) {
		int movePage = 1;
		if(page != null) {
			movePage = page;
		}
		
		page(movePage, view);
	}
	
	public void page(int movePage, int view) {
		this.firstList = (view * movePage) - view + 1;
		this.lastList = movePage * view; 
		nowPage = movePage;
		firstPage = movePage - (movePage - 1) % pageCount;
		lastPage = firstPage + pageCount - 1;
		prevPage = firstPage - 1;
		nextPage = firstPage + pageCount;
	}
	
	
	
}

화면 하단의 페이지 이동버튼을 만들어 주기 위해 page클래스에 코드를 추가 했습니다

현재페이지가 3페이지일 때 하단의 페이지 이동버튼은 1, 2, 3, 4, 5 가 출력되야 합니다

현재페이지가 12페이지일 때 하단의 페이지 이동버튼은 11, 12, 13, 14, 15 가 출력되야 합니다

이것을 공식으로 변환하면

현재페이지 - (현재페이지 - 1) % 출력 할 페이지 갯수가 됩니다

 

 

OrderMapper의 orderList 아래에 추가합니다

WHERE R BETWEEN #{firstList } AND #{lastList }

 

 

저장후 orderList의 페이지를 직접 요청하여 테스트해봅니다

 

이제 화면에 보여줄 페이지 버튼을 준비합니다

include폴더 아래에 pageBox.jsp를 붙여넣습니다

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<style>
	
.page_box {display: flex; justify-content: center; margin: 20px 0; }

.page_box li { border: 1px solid #999; border-right: none; width: 35px; height: 35px; text-align: center; line-height: 35px; }

.page_box li:last-child { border-right: 1px solid #999; }

.page_box li a { display: block; width: 100%; height: 100%; }

.now_page { background: #30DAD9; color: #fff; cursor: default; }

.now_page:hover { color: #fff; }

@media(max-width :767px) {
	.page_box { margin-top: 20px; }
	.page_box li { width: 25px; height: 25px; line-height: 25px; font-size: 12px; }
}	
</style>
    
<c:set var="path" value="${requestScope['javax.servlet.forward.request_uri']}" />
    
<ul class="page_box">
        <li><a href="${path }/${page.prevPage }">이전</a></li>
    
    <c:forEach begin="${page.firstPage }" end="5" var="i">
           <c:if test="${i != page.nowPage }">
               <li><a href="${path }/${i } ">${i }</a></li>
           </c:if>
           <c:if test="${i == page.nowPage }">
               <li><a class="now_page" onclick="return false;" href="${path }/${i }">${i }</a></li>
           </c:if>
    </c:forEach>
    
        <li><a href="${path }/${page.nextPage }${query }">다음</a></li>
</ul>

 

 

orderList.jsp의 </main> 바로 위에 pageBox를 추가합니다

<%@ include file="/WEB-INF/view/include/pageBox.jsp" %>

 

 

 

end를 5까지 했기때문에 5번까지 나오지만 목록의 수가 view를 넘을 때마다 페이지가 추가되게 변경해야합니다

 

총 출력되야 하는 페이지의 수를 totalPage, 목록의 총 갯수를 listCount라고 했을 때 

totalPage = listCount / view가 되지만 둘을 나눈 나머지가 0이 아닐경우 페이지를 하나 더 추가 해야합니다

 

listCount: 50, view: 10 => 5페이지 필요

listCount: 53, view: 10 => 5페이지와 남은 3개를 보여줄 페이지가 1개 더 필요

 

Page클래스에 totalPage를 구하는 메서드를 추가합니다

private int totalPage;	// 총 페이지 수

public void totalPage(int listCount) {
    if(listCount % view == 0) {
        totalPage = listCount / view;
    } else {
        totalPage = listCount / view + 1;
    }
}

 

OrderList클래스에 목록의 수를 받을 필드를 추가합니다

private int listCount; // 목록 총 갯수

 

컨트롤러에서 totalPage메서드를 실행합니다

p.totalPage(orderList.get(0).getListCount());

 

 

pageBox.jsp를 수정합니다

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<style>
	
.page_box {display: flex; justify-content: center; margin: 20px 0; }

.page_box li { border: 1px solid #999; border-right: none; width: 35px; height: 35px; text-align: center; line-height: 35px; }

.page_box li:last-child { border-right: 1px solid #999; }

.page_box li a { display: block; width: 100%; height: 100%; }

.now_page { background: #30DAD9; color: #fff; cursor: default; }

.now_page:hover { color: #fff; }

@media(max-width :767px) {
	.page_box { margin-top: 20px; }
	.page_box li { width: 25px; height: 25px; line-height: 25px; font-size: 12px; }
}	
</style>
<c:set var="uri" value="${requestScope['javax.servlet.forward.request_uri']}" />
<c:set var="pathValiable" value="${'/' }${page.nowPage }" />
<c:set var="path" value="${fn:replace(uri, pathValiable, '') }${'/' }" /> 


<ul class="page_box">
        <li><a href="${path }${page.prevPage }">이전</a></li>
    
    <c:forEach begin="${page.firstPage }" end="${page.firstPage + page.pageCount - 1 }" var="i">
           <c:if test="${i != page.nowPage }">
               <li><a href="${path }${i } ">${i }</a></li>
           </c:if>
           <c:if test="${i == page.nowPage }">
               <li><a class="now_page" onclick="return false;" href="${path }${i }">${i }</a></li>
           </c:if>
    </c:forEach>
    
        <li><a href="${path }${page.nextPage }">다음</a></li>
</ul>

 

<c:set var="uri" value="${requestScope['javax.servlet.forward.request_uri']}" />

현재 uri을 가져옵니다 => /orderList, /orderList/1, /orderList/2 ...

 

<c:set var="pathValiable" value="${'/' }${page.nowPage }" />

uri에서 pathValiable을 가져옵니다/1, /2, /3 ...

 

<c:set var="path" value="${fn:replace(uri, pathValiable, '') }${'/' }" /> uri에서 pathValiable을 빈문자로 변환합니다/orderList/1 => /orderList

 

pageBox.jsp를 다른 페이지에서 재활용하기 위해서 위와 같이 구현했습니다

 

 

view의 값을 바꿔가며 확인해봅니다view = 10일때

 

 

view = 2 일때

 

 

현재페이지가 1~5페이지 일땐 이전버튼이 없어야하고 다음페이지가 있을 때만 다음버튼이 출력되게 수정합니다

<ul class="page_box">
	<c:if test="${page.pageCount < page.firstPage }">
        <li><a href="${path }${page.prevPage }">이전</a></li>
    </c:if>
    <c:forEach begin="${page.firstPage }" end="${page.firstPage + page.pageCount - 1 }" var="i">
    	<c:if test="${i <= page.totalPage}">
           <c:if test="${i != page.nowPage }">
               <li><a href="${path }${i } ">${i }</a></li>
           </c:if>
           <c:if test="${i == page.nowPage }">
               <li><a class="now_page" onclick="return false;" href="${path }${i }">${i }</a></li>
           </c:if>
         </c:if> 
    </c:forEach>
    <c:if test="${page.firstPage + page.pageCount <= page.totalPage }">
        <li><a href="${path }${page.nextPage }">다음</a></li>
    </c:if>
</ul>