• 빠른 이동을 원하시면, 아래 키워드를 클릭하세요!

🌿 페이지네이션 클릭된 페이지 예시목록 조회 방법

페이지네이션을 통해 특정 페이지를 클릭했을 때, 해당 페이지에 속하는 목록을 조회하는 방법을 살펴보겠습니다. 예를 들어, 과일 목록이 있다고 가정하고, 한 페이지에 10개의 과일만 보여준다고 해봅시다. 페이지 번호를 클릭하면, 해당 페이지에 속하는 과일 목록이 화면에 나타나게 됩니다.

const JS_페이지그리기기능 = () => {
	const 페이지들 = new Array(10).fill(1).map((el, index) => {
		const 페이지번호 = index + 시작페이지;
  
	  return 페이지번호 <= 마지막페이지 ? `
		  <button onclick="JS_과일그리기기능(${페이지번호})">${페이지번호}</button>
		  ` : ``;
	}).join(" ");

	document.getElementById("HTML_페이지보여주는곳").innerHTML = 페이지들;
}

• 페이지 버튼 생성: JS_페이지그리기기능 함수는 페이지 번호를 생성하고, 그 번호를 클릭할 수 있는 버튼으로 만들어줍니다. 이때 각 페이지 번호는 JS_과일그리기기능(페이지번호) 함수와 연결되어 있습니다.
• 과일 목록 조회: 페이지 번호 버튼을 클릭하면, JS_과일그리기기능(페이지번호) 함수가 호출됩니다. 이 함수는 클릭된 페이지 번호에 해당하는 과일 목록을 화면에 그려줍니다.

const JS_과일그리기기능 = () => {
	const 결과 = 과일바구니.filter((el, index) => index < 10)

	document.getElementById("HTML_과일진열하는곳").innerHTML = 결과.map(el => `
		<div>${el.name} ${el.price}원</div>
	`).join("")
}

• 클릭된 페이지에 따른 목록 조회: JS_과일그리기기능 함수는 페이지 번호에 따라 과일바구니 배열에서 특정 범위의 과일을 걸러서(filter) 보여줍니다.
• 결과 화면 출력: document.getElementById("HTML_과일진열하는곳").innerHTML 부분에서 잘라낸 과일 목록을 HTML 요소에 추가하여, 실제로 웹 페이지에 해당 과일 목록이 나타나도록 합니다.

📝 실습 코드