[SpringBoot JSP] 게시판-페이징 처리/방법 2

1. domin 작성 (PageInfo.java)

package com.example.crud.domain;

import lombok.Getter;
import lombok.Setter;

import javax.lang.model.type.IntersectionType;

@Getter
@Setter
public class PageInfo {

    private int currentPage = 1;
    private int pageTotal; //페이지 전체 갯수

    private int startPageIndex; //현재 보여지는 페이지의 첫번째 인덱스(1부터 시작)
    private int endPageIndex; //현재 보여지는 페이지의 마지막 인덱스(1부터 시작)
    private int blockPage = 5; //한 화면에 보여줄 페이지의 수(번호수 1페이지, 2페이지,3페이지,4페이지,5페이지)

    private int itemCountPerPage = 12; //페이지 당 아이템 수
    private int itemCountTotal; //전체 아이템 수
    private int start;


    public PageInfo(Integer currentPage, Integer itemCountPerPage){
        //현재 페이지가 1보다 작으면 1 그렇지 않으면 현재페이지 보여줌
        this.currentPage=currentPage < 1 ? 1 : currentPage;
        this.itemCountPerPage = itemCountPerPage;
        this.start = computeStart();
    }

    private int computeStart(){
        //(현재페이지-1)*페이지 당 아이템 수
        return (currentPage-1) * itemCountPerPage;
    }

    public void setItemCountTatal(int itemCountTotal){
        this.itemCountTotal = itemCountTotal;

        //페이지 전채 갯수 = (전체아이템 수 % 페이지 당 아이템 수)가 0 이면 (전체 아이템 수 / 페이지 당 아이템수)이고
        // 그렇지 않으면 (전체아이템 수 / 페이지 당 아이템 수 +1) 이다.
        this.pageTotal = itemCountTotal % itemCountPerPage == 0 ? (itemCountTotal / itemCountPerPage) : (itemCountTotal / itemCountPerPage + 1);

        //화면에 보여지는 페이지의 첫번째 인덱스 =
        // ((현재페이지-1)/한화면에 보여줄 페이지수(5)) * 5 + 1 //1이면 1, 2이면 2, 3이면 3
        this.startPageIndex = ((currentPage-1)/ this.blockPage) * this.blockPage +1;

        //현재 보여지는 페이지의 마지막 인덱스 =
        //1+5-1=5(최소가1이면5까지), 2+5-1=6(2이면6)
        this.endPageIndex = this.startPageIndex + this.blockPage -1;

        //현재 보여지는 페이지의 마지막 인덱스 =
        //현재 보여지는 페이지의 마지막 인덱스가 페이지 전체 갯수 보다 크면 페이지 전체 갯수
        //그렇지 않으면 현재 보여지는 페이지의 마지막 인덱스
        this.endPageIndex = this.endPageIndex > this.pageTotal ? this.pageTotal : this.endPageIndex;

    }
}

 

2. repository

 //글 표시(select)
List<Reviews> appearNoticeReviewsInfo(@Param("pager") PageInfo pageInfo);

//페이지 수
int getPageCountReview();

 

3. xml

페이지 목록 수 제한 두는 법 -> LIMIT #{pager.start}, #{pager.itemCountPerPage}

<!--2. 글내용 표시(select)-->
<select id="appearNoticeReviewsInfo" resultType="Reviews">
    select * from taehan.REVIEWS
     ORDER BY reviewsIdx DESC
        LIMIT #{pager.start}, #{pager.itemCountPerPage}
</select>

<!--페이지 수(리뷰)-->
<select id="getPageCountReview" resultType="int">
	select count(reviewsIdx) from taehan.REVIEWS
</select>

 

3. service

//2. 글내용 표시(select)
public List<Reviews> appearNoticeReviewsInfo(PageInfo pageInfo){
    return noticeRepository.appearNoticeReviewsInfo(pageInfo);
}

 

4. controller

PAGE_SIZE =itemCountPerPage = 페이지 당 아이템 수

public static final int PAGE_SIZE = 5; -> 페이지 당 아이템 수를 5개 목록만 보여준다

public static final int PAGE_SIZE = 5;

//리뷰하기
//http://localhost8082/review
@RequestMapping(path = "review")
public ModelAndView review(@RequestParam(defaultValue = "1") int page, Model model) {

    //페이징 처리
    PageInfo pageInfo = new PageInfo(page, PAGE_SIZE);
    pageInfo.setItemCountTatal(noticeRepository.getPageCountReview());
    
    // 등록된 게시판 불러오기
    List<Reviews> reviews= noticeService.appearNoticeReviewsInfo(pageInfo);
   
   //모델에 담기
    model.addAttribute("pageInfo",pageInfo);
    model.addAttribute("reviews", reviews);

    return new ModelAndView("/notice/review");
}

 

5. view

<div class="pager-wrap">
    <ul class="pager">
        <%--화면에 보여지는 페이지의 첫번째 인덱스 > 한 화면에 보여줄 페이지의 수--%>
        <%--1,2,3,4,5 -> 첫번째 인덱스 : 1, 한 화면에 보여줄 페이지의 수 : 5 ///
            6,7,8,9,10-> 첫번째 인덱스 : 6, 한 화면에 보여줄 페이지의 수 : 5 ///  위 식 성립하므로 첫번째 인덱스 6이 나타날 때 부터 해당 버튼 나타남 --%>
        <c:if test="${pageInfo.startPageIndex > pageInfo.blockPage}">
            <li>
                <%--화면에 보여지는 페이지의 첫번째 인덱스 - 한 화면에 보여줄 페이지의 수--%>
                <a href="javascript:goPage(${pageInfo.startPageIndex - pageInfo.blockPage});"> <%--6-5=1  url : review?page=1 // 11-5=6 url : review?page=6--%>
                    <i class="fa fa-angle-left" aria-hidden="true"></i> <%--버튼--%>
                </a>
            </li>
        </c:if>


        <c:forEach begin="${pageInfo.startPageIndex}"
                   end="${pageInfo.endPageIndex}"
                   var="index">
            <li
                <%--버튼유무--%>
                <c:if test="${pageInfo.currentPage == index}">
                    class="active"
                </c:if>
            >
                <%--인덱스 번호 출력,연결--%>
                <c:choose>
                    <c:when test="${pageInfo.currentPage == index}">
                        <strong>${index}</strong>
                    </c:when>
                    <c:otherwise>
                        <a href="javascript:goPage(${index});">${index}</a>
                    </c:otherwise>
                </c:choose>
            </li>
        </c:forEach>

        <%--현재 보여지는 페이지의 마지막 인덱스 < 페이지 전체 갯수 --%>
            <%--1,2,3,4,5 -> 마지막 인덱스 : 5 / 6,7,8,9,10-> 페이지 전체 갯수 : 10 //// 위 식 성립하므로 마지막인덱스가 5->6으로 갈 때 해당 버튼 나타남 --%>
        <c:if test="${pageInfo.endPageIndex < pageInfo.pageTotal}">
            <li>
                <a href="javascript:goPage(${pageInfo.endPageIndex + 1});"> <%--5+1=6 url : review?page=6 /// 10+1=11 url : review?page=11 --%>
                    <i class="fa fa-angle-right" aria-hidden="true"></i> <%--버튼--%>
                </a>
            </li>
        </c:if>
    </ul>
</div>

<%--get방식 보내는 정규식--%>
<script>
    function replaceQueryParam(param, newval, search) {
        let regex = new RegExp("([?;&])" + param + "[^&;]*[;&]?");
        let query = search.replace(regex, "$1").replace(/&$/, '');

        return (query.length > 2 ? query + "&" : "?") + (newval ? param + "=" + newval : '');
    }

    function goPage(page) {
        location.href = location.pathname + replaceQueryParam("page", page, window.location.search);
    }
</script>