JS/Pagination 만들기

 

새로운 프로젝트를 진행함에 있어서 아래와 같이 페이지네이션 사양이 추가되어 급하게 만들게 되었다.

코드를 보시면 아시겠지만 아쉽게도 아직.. jQuery쓰고 IE를 버린지 한달도 안되었다.. OTL.. 당연이 front back이 나눠지지 않았으니 감안해서 보시면 되시겠다.

 

1. html

<div class="pageination-wrap">
    <div class="pagination renewal divListPagination"></div>
</div>

 

2. page script

const TEST = {
    page: 1,
    limit: 20,
    PAGER: null,
    init: () => {
    	...
        const page = parseInt(TEST.page, 10);
        TEST.PAGER = new PAGER('.divListPagination', page, args => {
            const {page} = args;

            TEST.page = page;
            TEST.getList();
        });
        ...
    },
    getList: () => {
        ...
        // ajax 호출
        ajax({
            ...
        },
        success: (response) => {
            ...
            TEST.setList(response);
            ...
        }
    },
    setList: (response) => {
        ...
        // 페이징
        TEST.PAGER.draw({
            page: parseInt(TEST.page, 10),
            limit: parseInt(TEST.limit, 10),
            total_count: parseInt(response['total_count'], 10),
        });
        ...
    }
}


TEST.init();

 

3. common script

class PAGER {
    constructor(selector, page, callback) {
        this.selector = selector;
        this.old = {page: page};
        this.callback = callback;

        const el = document.querySelector(this.selector);
        if (el !== undefined && el !== null) {
            const elDiv = el.querySelector('div.pagination');

            if (elDiv !== undefined && elDiv !== null && elDiv.dataset.last_page !== undefined && elDiv.dataset.last_page !== null) {
                this.old.last_page = parseInt(elDiv.dataset.last_page, 10);
            }

            this.event();
        }
    }

    event() {
        const el = document.querySelector(this.selector);
        el.addEventListener('keypress', e => {
            const page = e.target.value;
            if (e.target.tagName === 'INPUT' && e.key === 'Enter') {
                if (/^[0-9]+$/.test(page) === true && page <= this.old.last_page) {
                    // 숫자이고, 총 페이지를 초과하지 않을때
                    this.old.page = page;
                    this.callback({page: page});
                } else {
                    this.callback({page: this.old.page});
                }
            }
        });

        el.addEventListener('click', e => {
            e.preventDefault();
            const dataset = e.target.dataset;
            if (e.target.tagName === 'A' && dataset.page !== undefined) {
                this.old.page = dataset.page;
                this.callback({page: dataset.page});
            }
        });
    }

    draw(options) {
        const {page, limit, total_count} = options;
        const lastPage = Math.ceil(total_count / limit);
        const prevPage = (page === 1) ? 1 : page - 1;
        const nextPage = (page + 1 > lastPage) ? lastPage : page + 1;

        this.old.last_page = lastPage;

        const el = document.querySelector(this.selector);
        if (el !== undefined && el !== null) {
            el.innerHTML = `
            <a href="javascript:void(0);" class="first" data-page="1">처음</a>
            <a href="javascript:void(0);" class="prev" data-page="${prevPage}">이전</a>
            <input type="number" value="${page}" class="active" />
            <span class="slash"></span>
            <span class="total-page">${lastPage}</span>
            <a href="javascript:void(0);" class="next" data-page="${nextPage}">다음</a>
            <a href="javascript:void(0);" class="last" data-page="${lastPage}">마지막</a>
        `;
        }
    }
};

 

4. 기타

우린 팀원 동료분들의 니즈가 있어서 상황에 따라 공통함수 만들어 두고 해당 함수 call만 하는식으로 사용

# 이벤트 설정 공통
TEST.EVENT = {
    ...
    /**
     * 페이지 사이즈 변경
     *
     * @param options
     */
    limit: selector => {
        const el = document.querySelector(selector);
        const elForm = document.querySelector(el.dataset.form_selector);

        el.addEventListener('change', e => {
            elForm.querySelector('input[name="limit"]').value = e.target.value;
            elForm.querySelector('input[name="page"]').value = 1;
            elForm.submit();
        });
    },
    /**
     * 엑셀 다운로드
     *
     * @param options
     */
    excel: selector => {
        const el = document.querySelector(selector);

        el.addEventListener('click', e => {
            e.preventDefault();

            const elList = Array.from(document.querySelectorAll(el.dataset.length_selector)).filter((item) => {
                return item.classList.contains('tr-empty') !== true;
            });

            if (elList.length === 0) {
                SHOP.showLayerAlert({sContents: __('다운로드 받을 내용이 없습니다.')});
                return false;
            }

            EXCEL.setExcelDownload($(el), true);
        });
    },
    /**
     * 페이징
     *
     * @param selector
     */
    pager: selector => {
        const el = document.querySelector(selector);
        const elForm = document.querySelector(el.dataset.form_selector);
        const page = parseInt(CORE.nvl2(elForm.querySelector('input[name="page"]').value, 1), 10);

        const pager = new PAGER(selector, page, args => {
            const {page} = args;

            elForm.querySelector('input[name="page"]').value = page;
            elForm.submit();
        });
    }
    ...
}

// 페이징 이벤트 설정
TEST.EVENT.pager('#divPagination');