[JavaScript] Pagination 구현

Pagination

GET /posts?_page=7
GET /posts?_page=7&_limit=20 //20개씩 나뉜 데이터에서 페이지7을 가져오라는 의미

>> 만일 limit이 존재하지 않을 경우 기본값(default)는 10임

 

• currentPage: 현재 페이지
• totalCount: 총 데이터의 갯수
• pageCount: 화면에 나타날 페이지 갯수
• limit: 한 페이지 당 나타낼 데이터의 갯수

✅ 총 페이지 갯수 계산하기

//총 페이지 갯수 계산하기
let totalPage = Math.ceil(totalCount / limit)

예시 >

const totalCount = 53
const limit = 5

let totalPage = Math.ceil(totalCount / limit) // 11

✅ 현재 페이지의 그룹 계산하기

const currentPage = 1
const pageCount = 5

let pageGroup = Math.ceil(currentPage / pageCount) // 1

const currentPage = 7
const pageCount = 5

let pageGroup = Math.ceil(currentPage / pageCount) // 2

✅ 현재 페이지 그룹의 첫번째 / 마지막 숫자 구하기

const pageGroup = 1
const pageCount = 5
const totalPage = 11

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>`
}

const pageGroup = 3
const pageCount = 5
const totalPage = 11

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

const next = lastNumber + 1 // 다음 : 12
const prev = firstNumber - 1 // 이전 : 6