[HTML5] - 12 - 페이지네이션 기능 만드는 법
728x90
반응형
#주의#
이 글은 강의 글이 아니다.
틀린 부분, 깔끔하지 못한 부분 있을 수 있다.
지적해 주시면 저도 공부가 되고, 앞으로 이 글을 보실 분들에게도 도움이 될 거라 생각한다.
이번에는 좀 어려울 수 있지만 따라오면 괜찮을 것이다.
한 페이지에 게시글을 4개로 한정하고, 자동으로 다음페이지에 넘어가게 만들 것이다.
우선 addPost 함수를 수정해야한다.
여기에서 게시글이 추가될 때마다 게시글 수를 체크하여 페이지를 추가한다.
페이지 번호에 따라 보여지는 게시글을 조절하도록 수정해야한다.
또한, 페이지 번호를 나타내는 링크를 클릭할 때마다 해당 페이지에 해당하는 게시글만 보여지도록 해야한다.
마지막으로, 페이지 로딩 시 첫 페이지를 보여주도록 만들어 볼 것이다.
728x90
<script>에 아래의 코드를 넣어준다.
// 게시글 수가 4개를 초과하면 페이지를 추가함
var page = Math.ceil(postsDiv.childNodes.length / 4);
if (page > 1) {
var paginationDiv = document.getElementById("pagination");
paginationDiv.innerHTML = "";
for (var i = 1; i <= page; i++) {
var pageLink = document.createElement("a");
pageLink.className = "page-link";
pageLink.innerText = i;
pageLink.addEventListener("click", function() {
var pageNum = parseInt(this.innerText);
var start = (pageNum - 1) * 4;
var end = start + 4;
for (var j = 0; j < postsDiv.childNodes.length; j++) {
if (j >= start && j < end) {
postsDiv.childNodes[j].style.display = "block";
} else {
postsDiv.childNodes[j].style.display = "none";
}
}
var activeLink = document.querySelector(".page-link.active");
if (activeLink) {
activeLink.classList.remove("active");
}
this.classList.add("active");
});
paginationDiv.appendChild(pageLink);
}
}그러면 이제부터 게시글은 한페이지에 4개까지만 보이게 된다.
그리고 하나 더 추가 할 것이다.
바로 웹페이지를 들어갈 때 마다 첫 페이지부터 보이게 만들 것이다.
마찬가지로 아래에 있는 코드를 넣어준다.
반응형
// 페이지 로딩 시 첫 페이지를 보여줌
var postsDiv = document.getElementById("posts");
var page = Math.ceil(postsDiv.childNodes.length / 4);
if (page > 1) {
var paginationDiv = document.getElementById("pagination");
paginationDiv.innerHTML = "";
for (var i = 1; i <= page; i++) {
var pageLink = document.createElement("a");
pageLink.className = "page-link";
pageLink.innerText = i;
pageLink.addEventListener("click", function() {
var pageNum = parseInt(this.innerText);
var start = (pageNum - 1) * 4;
var end = start + 4;
for (var j = 0; j < postsDiv.childNodes.length; j++) {
if (j >= start && j < end) {
postsDiv.childNodes[j].style.display = "block";
} else {
postsDiv.childNodes[j].style.display = "none";
}
}
var activeLink = document.querySelector(".page-link.active");
if (activeLink) {
activeLink.classList.remove("active");
}
this.classList.add("active");
});
paginationDiv.appendChild(pageLink);
}
paginationDiv.firstChild.classList.add("active");
for (var i = 4; i < postsDiv.childNodes.length; i++) {
postsDiv.childNodes[i].style.display = "none";
}
}여기까지 왔다면 정말 웹페이지의 전반적인 부분은 만들었다고 볼 수 있다.
그리고 한가지 빼먹은게 있다.
<body> 태그에 <div>중 <button class>가 있을 것이다.
이전에 만들었던 잔해이므로 지워주자.
완료 되었다면 이렇게 게시글을 작성할때 마다 하단에 버튼들이 자동으로 늘어날 것이다.
하지만 이 웹페이지에는 여전히 많은 문제가 있다.
따라서 앞으로 함께 이 문제점을 고쳐나가면서 공부해보자.
728x90
반응형
'개발 이야기 > [HTML5]' 카테고리의 다른 글
| [HTML5] - 14 - 부트스트랩을 이용해서 웹페이지 만드는 법 (1) | 2023.05.05 |
|---|---|
| [HTML5] - 13 - 로컬 스토리지 삭제 기능 만드는 법 (2) | 2023.05.05 |
| [HTML5] - 11 - 삭제 기능 만드는 법 (0) | 2023.05.05 |
| [HTML5] - 10 - 게시글 저장 기능 만드는 법 (2) | 2023.05.04 |
| [HTML5] - 9 - 게시글 작성 기능 만드는 법 (2) (2) | 2023.05.03 |
댓글