#JavaScript Paging 구현하기(페이지 구현)

 

 

오늘은 페이지 구현에 대해서 알아보도록 하겠습니다.

 

저도 이 Page 구현을 하면서

 

머리가 안돌아가서 .. 상당히 애를 먹었습니다.

 

하지만 역시나 구글 검색으로 통해서 해결을 했는데요

 

사실 개인 프로젝트지만 이게 10 페이지가 넘어가니까 상당히 거슬리더라구요 ..

 

나중에 구현해야지.. 하면서 2주간 미루어 둔 작업을 오늘 했습니다.

 

 

참고한 블로그는 아래의 블로그입니다.

https://sjh010.tistory.com/1

 

 

먼저 저는 UL 태그를 통해서 구현을 했습니다.

 

                    <div class="pagination-wrapper clearfix">
                        <ul class="pagination float--right" id="pages">
                        </ul>
                    </div>

 

 

이렇게 pages 라는 ID를 가진 UL 태그를 만들어 줬구요

 

 

이런식으로 가로로 나열되는 UL태그입니다

 

먼저 백엔드에서는 페이지의 총 수, 그리고 게시판에 그려줄 item 10개, 총 item 갯수를 

 

리턴해줍니다.

 

 

이제 전부 JavaScript에서 구현하는데요

 

    function paging(totalData, currentPage) {
        const dataPerPage = 10;
        const pageCount = 5;

        // console.log("currentPage : " + currentPage);
        // console.log("totalData : " + totalData);
        const totalPage = Math.ceil(totalData / dataPerPage);    // 총 페이지 수
        const pageGroup = Math.ceil(currentPage / pageCount);    // 페이지 그룹

        // console.log("pageGroup : " + pageGroup);
        // console.log("totalPage : " + totalPage);

        let last = pageGroup * pageCount;    // 화면에 보여질 마지막 페이지 번호
        if (last > totalPage)
            last = totalPage;
        let first = last - (pageCount - 1);    // 화면에 보여질 첫번째 페이지 번호
        const next = last + 1;
        const prev = first - 1;

        // console.log("last : " + last);
        // console.log("first : " + first);
        // console.log("next : " + next);
        // console.log("prev : " + prev);

        if (totalPage < 1) {
            first = last;
        }
        const pages = $("#pages");
        pages.empty();
        if (first > 5) {
            pages.append("<li class=\"pagination-item\">" +
                "<a onclick=\"GetTarget(" + (prev) + ");\" style='margin-left: 2px'>prev</a></li>");
        }
        for (let j = first; j <= last; j++) {
            if (currentPage === (j)) {
                pages.append("<li class=\"pagination-item\">" +
                    "<a class='active' onclick=\"GetTarget(" + (j) + ");\" style='margin-left: 2px'>" + (j) + "</a></li>");
            } else if (j > 0 ) {
                pages.append("<li class=\"pagination-item\">" +
                    "<a onclick=\"GetTarget(" + (j) + ");\" style='margin-left: 2px'>" + (j) + "</a></li>");
            }
        }
        if (next > 5 && next < totalPage) {
            pages.append("<li class=\"pagination-item\">" +
                "<a onclick=\"GetTarget(" + (next) + ");\" style='margin-left: 2px'>next</a></li>");
        }
    }

 

 

요즘 잠을 못자서인지 머리가 안돌아가서 무식하게 때려 넣으면서 코딩을 했는데요 ..

 

로그를 보면서 설명해보겠습니다.

 

이렇게 로그에서 보면 아주 심플하게 설명이 가능한데요

 

그려주는 페이지는 first에서 last 까지입니다

for (let j = first; j <= last; j++) {
            if (currentPage === (j)) {
                pages.append("<li class=\"pagination-item\">" +
                    "<a class='active' onclick=\"GetTarget(" + (j) + ");\" style='margin-left: 2px'>" + (j) + "</a></li>");

그리고 prev가 5보다 크면 그려줘야겠죠?

        if (first > 5) {
            pages.append("<li class=\"pagination-item\">" +
                "<a onclick=\"GetTarget(" + (prev) + ");\" style='margin-left: 2px'>prev</a></li>");
        }

 

그리고 next도 5보다 커야 그려줍니다. 그리고 totalPage 보다는 작을때 그려줍니다.

(안그러면 +1 페이지가 됩니다 ㅜㅜ)

        if (next > 5 && next < totalPage) {
            pages.append("<li class=\"pagination-item\">" +
                "<a onclick=\"GetTarget(" + (next) + ");\" style='margin-left: 2px'>next</a></li>");
        }

그리고 페이지가 당연히 0보다 커야 그려줍니다

(안그러면 -4부터 시작해요 ..)

        } else if (j > 0 ) {
                pages.append("<li class=\"pagination-item\">" +
                    "<a onclick=\"GetTarget(" + (j) + ");\" style='margin-left: 2px'>" + (j) + "</a></li>");
            }

 

이렇게 구현을 해주면 멋진 페이징을 나타낼 수 있습니다.

 

참고할 수있는 소스를 공개해주신 소피디님께 감사드립니다 (--)(__)