위에서는 이해하기 쉬운 설명을 위해서 1페이지만 구현하도록 코드를 작성하였습니다. 이번에는 모든 페이지를 눌러도 클릭된 페이지에 해당하는 목록을 조회하는 방법을 설명하겠습니다.
다양한 방법이 있겠지만, 아래는 해당 페이지에 목록을 나열해주는 예시입니다.
const JS_과일그리기기능 = (페이지번호담는통) => {
const 결과 = 과일바구니.filter((el, index) => {
const 건너뛸갯수 = (페이지번호담는통 - 1) * 10
const 보여줄갯수 = 10
if(건너뛸갯수 < index && index < 건너뛸갯수 + 보여줄갯수) {
return true // 결과에 넣어줘
} else {
return false // 버려줘
}
})
document.getElementById("HTML_과일진열하는곳").innerHTML = 결과.map(el => `
<div>${el.name} ${el.price}원</div>
`).join("")
}