[TIL] #8 pagination

ddalkigum·2020년 12월 6일

JavaScript TIL 백엔드

TIL

목록 보기

8/50

D-7

위코드 사전스터디를 하고잇고, 이제 들어가기까지 일주일남았다
그전까지 빡세게 공부좀 하고 갈려는데
잘 안되는 것 같다

javascript

자바스크립트 pasination

아이템수가 적어서 클래스네임을 이용해서 만들었는데
아이템수가 수백개, 수천개가 된다면 그만큼의 클래스 이름은 바꿔주는데는
비효율적인 방법일 것 같다.

html

<body>
    <main>
        <div class="item_box">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
          	.
         	.
          	.
        </div>
    </main>
    <div class="pagination">
    </div>

    <script src="app.js"></script>
</body>

자바스크립트로 파지네이션을 만들어보고 싶어서 만들어 봤다.
쓰일 곳이 있어서... 🐒🐒

const pagination = document.querySelector(".pagination")
const contents = document.querySelector(".item_box")

const itemCount = 12
const lastItemNumber = Object.keys(contents.children).length
const maxPage = Math.ceil(lastItemNumber / itemCount)

첫부분에서 Object의 길이를 어떻게 구할까 생각하다가
자식들을 다 가지고 와서 부르면 되겠다싶어서 했더니 나왔습니다...
페이지를 따로 넣어놓지 않았기 때문에 아이템의 갯수에 따라서
페이지 넘버가 나오게 설정해주려고 maxpage를 구해주고

let paginationNumber = []
let paginationHTML = "";

/*  여기는 상관 없는 부분입니다.
for (let index = 0; index < 10; index++) {
    const element = contents.children[index]
    itemId = element.id
}
*/

for (let index = 0; index < maxPage; index++) {
    paginationNumber.push(index + 1)
}

paginationNumber.forEach(number => {
    paginationHTML += `<span class="pagination__number" style="cursor:pointer">${number}</span>`
});

pagination.innerHTML = paginationHTML

윗 부분은 페이지 클릭했을 때, 아이디로 구분을 해볼려고 넣어봤던 코드구요

foreach를 처음 써봐서 연습해볼려고 사용한건데,
for문을 두번사용해서 돌려도 상관없을 듯 하네요

저렇게 추가를 해주고 마지막줄에서 페이지 넘버를 만들어 줍니다.

for (let index = 0; index < maxPage; index++) {
    pagination.children[index].addEventListener("click", handleClickNumber = (e) => {
        page_number = e.target.innerText
        for (let index = 0; index < lastItemNumber; index++) {
            contents.children[index].className = "hiding"
        }
        for (let index = 0; index < itemCount; index++) {
            contents.children[((page_number - 1) * itemCount) + index].className = "item"
        }
    })
}