251일차(모험 160일차) - 페이징 코드 추가 완료

페이징

console.log

fullCount, startPage, endPage, prev, next	curpage
6 1 5 false true	1
6 6 6 true false	2
6 6 6 true false	3
6 6 6 true false	4
6 6 6 true false	5
6 6 6 true false	6

 

클라이언트 코드를 고치려고 하는데 startPage가 제대로 값이 안나와서

다시 백 수정을 했다.

 

1  1~5 (startPage가 1~5페이지는 1)

6   6~10

11  11~15

16   16~20

 

내림(4/6) *5 +1 = 1

내림(8/6)*5 +1 = 6

내림(14/6)*5+1 = 11

 

startPage = ((int) Math.floor( nowPage / (double) (displayPageNum+1) ) *5 )+1;

Math.ceil() : 올림 // Math.floor : 내림 // Math.round : 반올림

출처 : 자바스크립트 올림 / 내림 / 반올림 (Math.ceil / Math.floor / Math.round)

 

 

[update] startPage 코드 수정 [#45] #47

 

 

❗ 최종 코드는 이거 아님 주의! 

startPage 코드 수정 >> 스프링 페이징 정리, MySQL DB 추가하기

 

---

 

수정 후 다시 console 창을 확인했다.

 

 

console.log(fullCount, startPage, endPage, prev, next)

console.log(curpage)

 

 

 

 

해당 링크를 보면서 js와 html을 수정했고 원하는 값을 띄우기에 성공했다.

출처 : [JavaScript] 페이지 처리, 페이징 처리

 

페이징 버튼은 5개만 띄우게 설정했고 db에 저장된 값들이 페이지 별로 6개씩 띄우면

총 6페이지가 띄워진다. 

 

페이지당 6개의 글, 페이지는 총 5개씩 띄우기

 

 

다음 버튼을 누르면 6페이지로 넘어가고 이전 버튼이 생겨났다. (다음 버튼은 사라짐)

이전 버튼을 누르면 다시 위에 사진처럼 1~5페이지가 띄워진다.

 

 

6페이지는 한개만 띄워짐

 

 

수정 전 코드

 

    for (let i = 0; i < count; i++) {
            if (i + 1 == curpage) {
                    tempHtml += `
<li class="page-number" value="${i + 1}"><img class="paging-num" id="page-number1-img" value="0" src="img/num.png"></li>
      `;
                }
            else {
                    tempHtml += `
<li class="page-number" value="${i + 1}"><img class="paging-num" id="page-number1-img" value="0" onclick="getArticle(${i + 1})" src="img/num.png"></li>
`; // value는 페이지 값 // getArticle(db 저장된 idx) 값
                }

    }

 

<ul class="page-numbering-1" id="board-pages-1">

    <li class="left-number" value="before"><img class="paging-num" id="left-num-img" value="0" src="img/left-num.png"></li>

    <ul class="page-numbering" id="board-pages">
        
        <li class="page-number" value="1"><img class="paging-num" id="page-number1-img" value="0" src="img/num.png"></li>
        <li class="page-number" value="2"><img class="paging-num" id="page-number2-img" value="0" src="img/num.png"></li>
        <li class="page-number" value="3"><img class="paging-num" id="page-number3-img" value="0" src="img/num.png"></li>
        <li class="page-number" value="4"><img class="paging-num" id="page-number4-img" value="0" src="img/num.png"></li>
        <li class="page-number" value="5"><img class="paging-num" id="page-number5-img" value="0" src="img/num.png"></li>
     
    </ul>
    <li class="right-number" value="after"><img class="paging-num" id="right-num-img" value="0" src="img/right-num.png"></li>
</ul>

 

 

 

 

* getArticle() : 서버와 통신 후 makeListPost(), makePagination() 실행

* makePagination() : 하단 페이징 버튼

 

getArticle(curpage)와 makePagination()이 계속 상호작용하는 것을 포인트로 잡아서

이전 버튼과 다음 버튼을 눌렀을 때 beforeClick(curpage), nextClick(curpage)

각각의 함수가 실행되고 해당 함수가 실행되면 현재 페이지(curpage)를 담아서

getArticle(curpage+1)이 실행되게 했다. 

→ 1페이지에서 다음버튼 클릭 시 2페이지로 변환

 

 

어느정도 페이징 코드가 완성된 것 같아서 따로 정리를 하고 

이후에 코드를 깔끔하게 수정해야겠다. (+css 😩)

 

---

 

- wiki 정리

    • 트러블 슈팅 wiki 작성 완료 [ 10. 트러블슈팅 ]

    • erd 추가

    • 라이브러리 추가

- milestone 추가(05.24~ 05.30)