페이지네이션

 

전체리스트 get매핑에 추가하기

@RequestParam(value = "page",defaultValue = "0") int page 

= 현재페이지가 0

 

int perPage = 4; //한페이지에 4개
Pageable pageable = PageRequest.of(page, perPage); //표시할페이지, 한페이지당 몇개(4개)

 

- 리스트 상품을 페이지네이션하기

List<Product> products = productRepo.findAll(); 을 

Page<Product> products = productRepo.findAll(pageable); 로 바꾼다

 

 

한페이지당 4개 상품만 나온다

총 상품 갯수를 알아야 총 몇페이지 나오는지 나온다.

 

// 페이지를 보여주기 위한 계산
long count = productRepo.count(); //전체 상품갯수(long타입 리턴)
double pageCount = Math.ceil((double)count / (double)perPage); // 13/6개 = 2.1(3페이지) double(소수점나오도록)

model.addAttribute("pageCount", (int)pageCount); //총페이지
model.addAttribute("perPage", perPage); 		 //한 페이지당 상품갯수
model.addAttribute("count", count);				 //전체 상품개수
model.addAttribute("page", page); 				 //현재 페이지

 

 

 

[ index.html ]

 

 

th:if="${count > perPage}" 

 

th:each="number : ${#numbers.sequence(0, pageCount-1)}" : 0부터 ~ 총페이지-1 까지 숫자로. 반복 

• 1을 하는 이유? 1페이지는 인덱스[0] 부터 시작하니까 (1,2페이지가 있으면 인덱스가 0,1이라서 -1을 해준다.)
  근데 화면에는 0,1,2페이지로 보이면 안되니까 th:text="${number + 1}"  1을 더해준다.

<li class="page-item" th:each="number : ${#numbers.sequence(0,pageCount-1)}">
	<a class="page-link" href="" th:text="${number+1}"></a>
</li>

 

 

 

페이지에 마우스 올려보면 http://localhost:8080/admin/products 파라미터가 뜨는데

 

a태그에 th:href="@{/admin/products/} + '?page=__${number}__'"  추가하고 마우스 올리면

http://localhost:8080/admin/products/?page=0

페이지 누르면 이동이 된다.

 

 

 

css ) 페이지 누를때 버튼 진하게 표시하는 법 (active) 

주의!  띄어쓰기 조심

th:classappend="${page==number} ? 'active' : ''"

 

 

 

- 이전, 다음 버튼도 만들기

<ul class="pagination">
    <li class="page-item" th:if="${page > 0}">
        <a th:href="@{/admin/products/} + '?page=__${page-1}__'" class="page-link">이전</a>
    </li>
    <li class="page-item" th:classappend="${page==number} ? 'active' : ''"
        th:each="number : ${#numbers.sequence(0,pageCount-1)}">
        <a th:href="@{/admin/products/} + '?page=__${number}__'" class="page-link" th:text="${number+1}"></a>
    </li>
    <li class="page-item" th:if="${page < pageCount-1}">
        <a th:href="@{/admin/products/} + '?page=__${page+1}__'" class="page-link">다음</a>
    </li>
</ul>

 

이전버튼

현재페이지가 0(첫페이지)보다 넘을때 이전페이지 나타남  th:if="${page > 0}"

이전버튼은 현재페이지 - 1 

<li class="page-item" th:if="${page > 0}">
     <a th:href="@{/admin/products/} + '?page=__${page-1}__'" class="page-link">이전</a>
</li>

 

다음버튼

현재페이지가 총페이지보다 밑일때 다음버튼 나타남 page < pageCount-1 

다음버튼은 현재페이지 + 1

<li class="page-item" th:if="${page < pageCount-1}">
    <a th:href="@{/admin/products/} + '?page=__${page+1}__'" class="page-link">다음</a>
</li>