22일에 배운 내용이랑 이어져서, 22일에다가 계속 정리함
============================================================================================================================================
< 멀티 파일 게시판 >에 게시글이 단 한 개도 없을 경우, ‘페이징 적용’ 시, 아래와 같이 ‘페이지 번호’가 이상하게 뜨는 현상 발생
<!DOCTYPE html>
<html xmlns:th="<http://www.thymeleaf.org>">
<head >
<th:block th:insert="/common/common::head" />
<script src="<https://kit.fontawesome.com/a076d05399.js>" crossorigin="anonymous"></script> <!-- ICON 사용을 가능케 하는 구문 -->
<link rel="stylesheet" href="/css/myboard/list.css">
</head>
<body>
<th:block th:insert="~{/common/common::header}" />
<main>
<h1>메인 영역</h1>
<div class="wrap view-size">
<p class="page-tit">멀티 파일 게시판</p>
<div class="flex end">
<a href="/multifiles/write">글쓰기</a>
</div>
<div class="list">
<ul class="flex">
<li>no</li>
<li>제목</li>
<li>조회수</li>
<li>작성자</li>
<li>작성일</li>
</ul>
<ul class="flex" th:each = "dto : ${show}"> <!-- ${show}의 기원 : [ MultiFileBoardServiceImpl ]에서 model.addAttribute("show", show ); -->
<li>[[${dto.bno}]]</li> <!-- [ MultiFileBoardEntity.java ]에서 설정한 '게터 메서드'를 통해 ( ~.no )에 대한 데이터를 가져와서 화면에 뿌려줄 수 있는 거임 -->
<li>
<a th:href="|/multifiles/${dto.bno}|">[[${dto.subject}]]</a>
<!-- '파일 업로드'를 최소 한 개라도 한 경우, 특정 제목 옆에, (디스크 모양의 ICON)과 (업로드된 파일의 개수)가 나타남 -->
<span th:unless="${#lists.isEmpty(dto.files)}"> <!-- thymeleaf 문법 : ${#lists.isEmpty( A )}
=> 'A에 대한 List 컬렉션( [ MultiFileBoardEntity.java ] - List<MultiFileEntity> files )'의 Empty 여부 -->
<i class="fas fa-save"></i> <!-- 디스크 모양의 ICON -->
( [[${#lists.size(dto.files)}]] ) <!-- thymeleaf 문법 : ${#lists.size( A )}
=> A에 대한 List 컬렉션( [ MultiFileBoardEntity.java ] - List<MultiFileEntity> files )의 개수 -->
</span>
</li>
<li>[[${dto.readCount}]]</li>
<li>[[${dto.writer}]]</li>
<li>[[${dto.updatedDate}]]</li>
</ul>
<ul th:if="${#lists.isEmpty(show)}">
<li>게시글이 한 개도 존재하지 않습니다</li>
</ul>
</div>
<!-- 페이징(Paging) -->
<div class="pagging flex center" th:if="${pd}">
<!-- ${pd}의 기원 : [ MultiFileBoardServiceImpl ]에서 model.addAttribute( "pd", new PageInfo(page, ea, pageTotal) ); -->
<th:block th:if="${ pd.start gt 1 }">
<span>
<a href="/multifiles"><<</a>
</span>
<span>
<a th:href="|/multifiles?page=${ pd.start -1 }|"><</a>
</span>
</th:block>
<ol class="pno-list flex">
<li th:each="pno : ${#numbers.sequence( pd.start , pd.end )}">
<a th:href="|/multifiles?page=${pno}|" th:text="${pno}"></a>
</li>
</ol>
<th:block th:if="${ pd.end lt pd.pageTotal }">
<span>
<a th:href="|/multifiles?page=${ pd.end +1 }|">></a>
</span>
<span>
<a th:href="|/multifiles?page=${ pd.pageTotal }|">>></a>
</span>
</th:block>
<script type="text/javascript"> /* <멀티 파일 게시판> 창 화면의 하단에 보여지는 '페이지 번호'를 클릭시, 클릭한 '페이지 번호'에 효과줌 */
$(function(){
var page = "[[${ pd.page -1 }]]"; // (pd.page) -1 => (내가 클릭한 page 숫자 값) -1 ※ 1을 뺀 이유 : '인덱스 번호(0부터 시작!!!)'로 받아내기 위해
// alert(page);
var ea = "[[${ pd.ea }]]"; // pd.ea => <멀티 파일 게시판> 창 화면의 하단에 보여질 '페이지 번호'의 개수 (5개)
$(".pno-list li").eq(page%ea).addClass("sel");
// [ $(".pno-list li") ] : <class="pno-list">인 것의( <ol class="pno-list flex"> ), 모든 자식 <li> 태그 -> 현재, forEach 형태로 돌고 있음
/* [ ~.eq(인덱스 번호) ] : 선택한 ~ 중에서, '인덱스 번호'에 해당하는 요소를 찾아서 선택
※ [.eq(인덱스 번호) ]의 () 안에는 '인덱스 번호' 형태로 들어가야 되기 때문에, 상기의 pd.page에서 1을 뺀 거임 */
// % : 나머지 값을 구하는 연산자 => .eq(page%ea)
// [ .addClass("sel") ] : "sel"이라는 클래스를 추가 => [ myboard - list.css ]에서 설정한, < .pagging ol li.sel a{background-color: #000;} >이 발현됨
// 해당하는 '페이지 번호'를 누른 다음에, css 효과가 발현되는 후행적인 거임
/*
● ex) [ 첫번째 '페이지 블록' : (1번 ~ 5번) 페이지 번호 ]에서 '(4번) 페이지 번호'를 누르는 경우
- var page = 4-1 = 3
- .eq(page%ea) = .eq(3%5) = .eq(3)
∴ [ 첫번째 '페이지 블록' : (1번 ~ 5번) 페이지 번호 ]에서, '인덱스 번호' 3에 해당하는, '(4번) 페이지 번호'에 "sel"이라는 클래스를 추가 => [ myboard - list.css ]에서 설정한, < .pagging ol li.sel a{background-color: #000;} >이 발현됨
● ex) [ 두번째 '페이지 블록' : (6번 ~ 10번) 페이지 번호 ]에서 '(6번) 페이지 번호'를 누르는 경우
- var page = 6-1 = 5
- .eq(page%ea) = .eq(5%5) = .eq(0)
∴ [ 두번째 '페이지 블록' : (6번 ~ 10번) 페이지 번호 ]에서, '인덱스 번호' 0에 해당하는, '(6번) 페이지 번호'에 "sel"이라는 클래스를 추가 => [ myboard - list.css ]에서 설정한, < .pagging ol li.sel a{background-color: #000;} >이 발현됨
*/
});
</script>
</div>
</div>
</main>
<th:block th:insert="/common/common::footer" />
</body>
</html>