1-2. 0823_Pagination 코드로 설정하기

브라우저에 있는 Pagination은 원래 부트스트랩에서 태그로 넣어져 있는데,
이것을 코드에서 넣어보기

 

 + index2.html

↑axios{} 안에 makePage(파라미터)  코드 추가

↑function makePage(){} 생성

 

First << 1 2 3 >> Last

page 요청 파라미터 (페이지 개수) = 1
perPage 요청 파라미터 (한 페이지당 레코드 개수) = 3
total (전체 개수) = 5

 

Math.ceil() : 소수점이 나오면 올림한다.
5/3 = 페이지를 몇 번까지 표시할 것인지 번호를 나타냄

 

//<!-------- axios 사용하기 (+doList())-------->
// <script> 태그 안 내용임
            
            let mode 
            let persons = []
            let selected
            
            $(document).ready(() => {   //첫 화면 로딩시 첫번째 화면만 보이게
                console.log('ready 호출됨')

                showPage(0)

                //웹서버에서 데이터 가져오기
                doList(1, 3)
            })

            function doList(page, perPage) {
                console.log('doList 호출됨')

                axios({ //함수() 안에 {}여기에 객체 넣어주기, 요청하기
                    method:'get',
                    url:`/test1?page=${page}&perPage=${perPage}`,
                    responseType:'json'
                }).then((response) => {  //이 함수로 요청에 대한 응답 결과가 넘어옴
                    console.log(`요청에 대한 응답 : ${JSON.stringify(response)}`)
                    
                    persons = response.data.output.body

                    for(let i = 0; i < persons.length; i++) {
                        addListItem(i) //여기 i가 아래 함수에 index로 들어감
                    }

                    makePage(response.data.output.header) //응답으로 받은 것 중에 header의 속성을 값 파라미터로 넘겨준다.
                
                }).catch((err) => {  //에러가 생겼을 때 
                    console.log(`에러 발생 : ${err}`)
                })
            }


            function makePage(header) {
                let curPage = Number(header.page)   //current Page의 의미로 변수이름 바꿈
                let perPage = Number(header.perPage)
                let totalRecords = header.total //몇 개의 데이터가 있는지, 원래 숫자로 넘어오기 때문에 변환할 필요가 없다.
                console.log(`header : ${curPage}, ${perPage}, ${totalRecords}`)

                let pageCount = Math.ceil(totalRecords / perPage) //아래쪽에 몇 번까지 표시할 것인지 페이지 번호가 나온다.
                //Math.ceil() : 소수점이 나오면 올림
                console.log(`pageCount : ${pageCount}`)
            


            let pagination = `<nav aria-label="Page navigation example">
                            <ul class="pagination pagination-circle pg-blue">`
            if (curPage > 1) {
                pagination += `<li class="page-item disabled"><a class="page-link" href="javascript:doList(1, ${perPage}">First</a></li>
                            <li class="page-item disabled">
                                <a class="page-link" aria-label="Previous" href="javascript:doList(${curPage-1}, ${perPage})">
                                <span aria-hidden="true">&laquo;</span>
                                <span class="sr-only">Previous</span>
                                </a>
                            </li>`
            } else {
                pagination += `<li class="page-item disabled"><a class="page-link">First</a></li>
                            <li class="page-item disabled">
                                <a class="page-link" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                                <span class="sr-only">Previous</span>
                                </a>
                            </li>`
            }             
                            

            // 한 번에 보여줄 페이지 개수
            let unitPage = 10

            // 시작페이지의 인덱스
            let startPageIndex = Math.floor((curPage-1)/unitPage) * unitPage

            let endPage = pageCount - startPageIndex
            if (endPage > unitPage) {
                endPage = startPageIndex + unitPage
            } else {
                endPage = startPageIndex + endPage
            }
            console.log(`시작 페이지 인덱스와 끝 페이지 인덱스 : ${startPageIndex}, ${endPage}`)
            

            for (let i = startPageIndex; i < endPage; i++) {
                if ((i+1) == curPage) { //현재 조회된 페이지
                    pagination += `<li class="page-item active"><a class="page-link" href="#">${i+1}</a></li>`
                } else {
                    pagination += `<li class="page-item"><a class="page-link" href="javascript:doList(${i+1}, ${perPage})">${i+1}</a></li>`
                }
            }
                            // <li class="page-item active"><a class="page-link">1</a></li>
                            // <li class="page-item"><a class="page-link">2</a></li>
                            // <li class="page-item"><a class="page-link">3</a></li>
                            // <li class="page-item"><a class="page-link">4</a></li>
                            // <li class="page-item"><a class="page-link">5</a></li>

            if (curPage < pageCount) {
                pagination += `<li class="page-item">
                                <a class="page-link" aria-label="Next" href="javascript:doList(${curPage+1}, ${perPage})">
                                <span aria-hidden="true">&raquo;</span>
                                <span class="sr-only">Next</span>
                                </a>
                            </li>
                            <li class="page-item"><a class="page-link" href="javascript:doList(${pageCount}, ${perPage})">Last</a></li>
                            </ul>
                            </nav>`
            } else {
                pagination += `<li class="page-item disabled">
                                <a class="page-link" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                                <span class="sr-only">Next</span>
                                </a>
                            </li>
                            <li class="page-item"><a class="page-link">Last</a></li>
                            </ul>
                            </nav>`
            }

            $(`#pagination`).html(pagination)
        
        }

Math.floor()


<a class="page-link" href="javascript:doList(${i+1}, ${perPage})">
                                                   현재페이지, 몇페이지씩 보겠다
앵커태그 안에 href=""안에 값 쓰면 버튼을 눌렀을 때 실행할 동작 실행가능

href="#" --> 아무것도 안함