유디의 공간정보·개발일기
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">«</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">«</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">»</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">»</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="#" --> 아무것도 안함
'Node.js' 카테고리의 다른 글
4. 0826_복습 (0) | 2021.08.26 |
---|---|
3. 0825_Vue 더 알아보기,, (오늘 Summary) (0) | 2021.08.25 |
2.0824_ react.js / vue.js /윈도우 유저네임 3년만에 바꾸기 성공,, (0) | 2021.08.24 |
1-1. 0823_복습 정리 겸 postman으로 웹서버 연결 (0) | 2021.08.23 |