[레시피] 게시판 페이지네이션 view

버튼 만들기

→ 이전페이지 , 페이지 갯수 , 다음페이지

 

 

- 클래스 PageMakerDTO 생성

/* 시작 페이지 */
private int startPage;

/* 끝 페이지 */
private int endPage;

/* 이전 페이지, 다음 페이지 존재유무 */
private boolean prev, next;

/*총 게시물 수*/
private int totalPost;

/* 현재 페이지, 페이지당 게시물 표시수 정보 */
private Criteria cri;

 

생성자는 totalPost, cri만 해준다

public PageMakerDTO(int totalPost, Criteria cri) {
  this.totalPost = totalPost;
  this.cri = cri;

  this.endPage = (int)(Math.ceil(cri.getPageNum()/10.0))*10;
  this.startPage = this.endPage -9;
  int realEnd = (int)(Math.ceil(totalPost * 1.0/cri.getAmount()));

  if(realEnd < this.endPage) {
     this.endPage = realEnd;
   }

}

 

- 마지막 페이지(endPage) 계산법 = (int)(Math.ceil(cri.getPageNum()/10.0))*10;

Math.ceil() : 소수점을 정수로 올림.

ceil(1~10 / 10 )
0.1~0.9 는 올려서 1이고 *10 하면  10 

 

마지막 페이지는 1~10 => 10 ,  11~20 => 20

 

 

- 시작 페이지 계산법(startPage) =  this.endPage -9;

1페이지 = 마지막 페이지에서 -9 

 

 

 

- 실제 끝 페이지 계산법(realEnd) = int)(Math.ceil(totalPost * 1.0/cri.getAmount()));

 

총 200개 / 한페이지당 20개 = 마지막페이지 10
총 201개 / 한페이지당 20개 = Math.ceil(10.1) 마지막페이지 11

 

 

- 실제 끝 페이지보다 < 마지막 페이지가 많을 경우 = 실제 끝페이지가 마지막페이지로 

(총게시글이 50개밖에 없는데 마지막 페이지가 10일 수가 없으니까) 

if(realEnd < this.endPage) {
    this.endPage = realEnd;
}

 

- '<' 이전버튼 이전페이지로  = this.prev = this.startPage > 1;

첫페이지가 1 이상일 때 나타나도록
   
        

 

 

- '>' 다음버튼 다음페이지로 = this.next = this.endPage < realEnd;

 

11~20페이지에서 마지막 20페이지이고 실제 끝페이지는 21이다 

그러면 다음 페이지버튼 나타나도록

 

 

 

getter,setter , toString() 자동생성하기 

 

 

totalPost값은 구하도록 mapper에 추상 메서드 추가하기

/* 게시글 총 갯수 */
public int getTotalPost();

 

 

 

 

총 게시글 갯수를 세서 리턴하도록

mapp.xml

<!-- 게시물 총 개숫 -->
<select id="getTotalPost" resultType="int">
    
    select count(*) from recipe
    
</select>

 

mapper 테스트해보기

/* 총 게시글 수*/
int result = recipeMapper.getTotalPost();
log.info("총 게시글 수 : " +result);

 

 

serviceImpl

@Override
public int getTotalPost() {
    return recipeMapper.getTotalPost();
}

 

 

Controller

@GetMapping("/list")
public String recipeListGet(Model model, Criteria criteria) {

   model.addAttribute("boardList", recipeService.getListPaging(criteria));

   int totalPost = recipeService.getTotalPost();
   PageMakerDTO pmk = new PageMakerDTO(totalPost, criteria);
   model.addAttribute("pmk", pmk);

   return "recipe_list";
}

totalPost, criteria 두개값만 안다면 시작페이지, 마지막페이지, 실제끝페이지 등등 모두 계산 가능.

 

 

 

 

view 에 페이지 번호 html

table끝나고 다음부분에 추가

<nav aria-label="Page navigation" th:if="${pmk.endPage > 0}">
    <ul class="pagination justify-content-center mt-5">
        <li class="page-item"  th:if="${pmk.prev}">
            <a class="page-link" href="javascript:;" aria-label="이전">
                <span class="material-icons"> < </span>
                <span class="sr-only">이전</span>
            </a>
        </li>

        <li class="page-item" th:each="number : ${#numbers.sequence(1,pmk.endPage)}">
            <a class="page-link" th:href="@{/recipe/board/list}+'?pageNum=__${number}__'" th:text="${number}"></a>
        </li>

        <li class="page-item"  th:if="${pmk.next}">
            <a class="page-link" href="javascript:;" aria-label="다음">
                <span class="material-icons"> > </span>
                <span class="sr-only">다음</span>
            </a>
        </li>
    </ul>
</nav>

* justify-content-center mt-5 : 가운데 정렬

 

 

 

- 번호누를때 페이지 넘겨야함

th:href="@{/board/list}+'?pageNum=__${number}__'"   페이지 넘버가 동적으로 넘어가도록 언더바 두번  

☆ 이중으로 변수가 들어갈 경우 __${변수}__

 

 

 

- pageNum 현재넘버가 number와 같으면 색표시

th:classappend="${pmk.criteria.pageNum == number} ? 'active':'' "

 

 

- th:if="${pmk.endPage > 0}   : 마지막 페이지가 1이상이면

 

- th:each="number : ${#numbers.sequence(1,pmk.endPage)  : 1~마지막 페이지까지 반복

   sequence( 1 , pmk.endPage ) : 1~마지막 페이지까지 

 

 

 

<li class="page-item" th:if="${pmk.prev}">
    <a class="page-link" th:href="@{/recipe/board/list}+'?pageNum=__${pmk.startPage-1}__'">

            <span class="material-icons"> < </span>

            <span class="sr-only">이전</span>

    </a>
</li>

                       

- 이전, 다음 버튼의 부모태그의 li 태그에 th:if = true면 a태그 이전,다음 버튼 나오도록

th:if="${pmk.prev}" 

th:if="${pmk.next}" 

 

private boolean prev, next; 로 정의했기 때문에 무조건 true가 된다.

 

 

 

- 이전 < 버튼의 a 태그에는  

th:href="$@{board/list}+'?pageNum=__${pmk.startPage-1}__'" 

첫 페이지의 11페이지일 때 이전페이지 누르면 1~10페이지네이션  

(1페이지 -1 = 0은 없으니까 11페이지부터 가능)

 

 

 

 

- 다음 > 버튼의 a 태그에는  

th:href="@{/recipe/board/list}+'?pageNum=__${pmk.endPage+1}__'"

 

마지막 페이지 10페이지에서 다음페이지 누르면 11페이지~ 나오게

  

 

 

 

10페이지에서 다음페이지 누를때 1~끝페이지까지 모두 나와버린다..

 

 

 

그럼 1부터 endPage 가 아니라 startPage~endPage까지 반복하기

th:each="number : ${#numbers.sequence(pmk.startPage,pmk.endPage)}"