[JS] json-server로 pagination 구현하기

 

 

 

json-server - Paginate

• GitHub - typicode/json-server: Get a full fake REST API with zero coding in less than 30 seconds (seriously)

GitHub - typicode/json-server: Get a full fake REST API with zero coding in less than 30 seconds (seriously)

GET /posts?_page=7
GET /posts?_page=7&_limit=20

 

 

 

 

pagination을 구현하기 위한 변수 설정

• currentPage : 현재 페이지
• totalCount : 총 데이터의 갯수
• pageCount : 화면에 나타날 페이지 갯수
• limit : 한 페이지당 나타날 데이터의 갯수
• totalPage = Math.ceil(totalCount / limit) : 총 페이지의 갯수
• pageGroup = Math.ceil(currentPage / pageCount) : 현재 페이지의 그룹(현재 페이지가 몇번째 그룹에 속해있는지를 알아야 현재 페이지 그룹 상의 첫번째 숫자와 마지막 숫자를 구할 수 있다.)
• firstNumber : 현재 페이지 그룹의 첫번째 숫자
• lastNumber : 현재 페이지 그룹의 마지막 숫자

let lastNumber = pageGroup * pageCount // 5
if (lastNumber > totalPage) {
  lastNumber = totalPage
}
let firstNumber = lastNumber - (pageCount - 1) // 1

const next = lastNumber + 1 // 6
const prev = firstNumber - 1 // 0

// 1~5만큼 페이지네이션 그려줌
for (let i = firstNumber; i <= lastNumber; i++) {
  html += `<button class="pageNumber" id="page_${i}">${i}</button>`
}