[javascript] 자바스크립트 기반의 pagination 만들기 2편

이전 포스팅에서 스크립트로 작동하는 pagination을 봤다.

이제 그 코드를 파헤쳐 보자.

우선 html 부터 보자.보시는 바와 같이 특별한 코드는  없다. 

테이블을 만들어주는 table코드안에 필요한 내용들을 넣은 것 뿐이다.

하지만 테이블 머릿글은 고정하고 내용만 계속 갱신해주어야 하기 때문에

thead와 tbody를 통해 구분해주었다.

<table id="testTable" border="1">
    <thead>
    <tr>
        <td><label>
            <input type="checkbox">
        </label></td>
        <td>번호</td>
        <td>내용</td>
    </tr>
    </thead>
    <tbody>
    </tbody>
</table>
<div id="pagination" style="text-align: center"></div>

이제 스크립트 코드를 순서대로 파헤쳐 보자. 
우선 테이블 안에 들어갈 내용부터 객체들로 이루어진 배열로 만들자. 글 내용은 독자들이 편한대로 설정하면 된다 

var list = [
    {num: 1, content: '가'},
    {num: 2, content: '나'},
    {num: 3, content: '다'},
    {num: 4, content: '라'},
    {num: 5, content: '마'},
    {num: 6, content: '바'},
    {num: 7, content: '사'},
    {num: 8, content: '아'},
    {num: 9, content: '자'},
    {num: 10, content: '차'},
    {num: 11, content: '카'},
    {num: 12, content: '타'},
    {num: 13, content: '파'},
    {num: 14, content: '하'},
    {num: 15, content: 'a'},
    {num: 16, content: 'b'},
    {num: 17, content: 'c'},
    {num: 18, content: 'd'},
    {num: 19, content: 'e'},
    {num: 20, content: 'f'},
    {num: 21, content: 'g'},
    {num: 22, content: 'h'},
    {num: 23, content: 'i'},
    {num: 24, content: 'j'},
    {num: 25, content: 'k'},
    {num: 26, content: 'l'},
    {num: 27, content: 'm'},
    {num: 28, content: 'n'},
    {num: 29, content: 'o'},
    {num: 30, content: 'p'},
    {num: 31, content: 'q'}
];

이제 변하지 않는 값들을 설정해주자 한 페이지안의 글 수와 한 블럭에 존재할 페이지 수만 바꿔서 설정만 해주면 나머지는 자동할당 된다. 

  

var pageCount = 3;
var blockCount = 3;
var totalPage = Math.ceil(list.length / pageCount);
var totalBlock = Math.ceil(totalPage / blockCount);
var pagination = document.getElementById('pagination');
var testTable = document.getElementById('testTable').querySelector('tbody');

이제부터 가장 중요한 table과 pagination을 그리는 함수를 보자.

var renderTableAndPagination = function(page = 1) {
    renderTable(page);
    renderPagination(page);
};

테이블을 그리는 함수이다

 html을 만들어서 innerHTML로 할당해준다.

var renderTable = function(page) {
    var startNum = (pageCount * (page - 1));
    var endNum = ((pageCount * page) >= list.length) ? list.length : (pageCount * page);

    var html = '';
    for (var index = startNum; index < endNum; index++) {
        html += '<tr><td><input type="checkbox"></td><td>' + list[index].num + '</td><td>' + list[index].content + '</td></tr>';
    }

    testTable.innerHTML = html;
};

pagination을 그리는 함수이다 생김새가 마음에 안든다면 a태그 안의 내용을 바꾸면 된다. 

var renderPagination = function(page) {
    var block = Math.floor((page-1)/blockCount)+1;
    var startPage = ((block-1)*blockCount)+1;
    var endPage = ((startPage + blockCount -1) > totalPage) ? totalPage : (startPage + blockCount -1);

    var paginationHTML = '';

    if (page !== 1) paginationHTML += "<a style='cursor:pointer' class='first_page'>First...</a>";
    if (block !== 1) paginationHTML += "<a style='cursor:pointer' class='back_page'>Prev</a>   ";

    for (var index = startPage; index <= endPage; index++) {
        paginationHTML += (parseInt(page) === parseInt(index)) ?
            "| <a style='color:#ff8400'>" + index + "</a> |" : "| <a style='cursor: pointer' class='go_page' data-value='" + index + "'>" + index + "</a> |";
    }

    if (block < totalBlock) paginationHTML += "<a style='cursor:pointer' class='next_page'>    Next</a>";
    if (page < totalPage) paginationHTML += "<a style='cursor:pointer' class='last_page'>  ...Last</a>";

    pagination.innerHTML = paginationHTML;
    addEventPagination(startPage, endPage);
};

pagination을 그렸으니 이제 클릭이벤트를 추가해주자. 클릭할때마다 테이블을 새로 그려준다. 

var addEventPagination = function(startPage, endPage){
    if (!!document.querySelector(".first_page")) {
        document.querySelector(".first_page").addEventListener('click', () => {
            renderTableAndPagination(1);
        });
    }

    if (!!document.querySelector(".back_page")) {
        document.querySelector(".back_page").addEventListener('click', () => {
            renderTableAndPagination(startPage-1);
        });
    }

    document.querySelectorAll(".go_page").forEach(goPage => {
        goPage.addEventListener('click', e => {
            renderTableAndPagination(parseInt(e.target.getAttribute('data-value')));
        });
    });

    if (!!document.querySelector(".next_page")) {
        document.querySelector(".next_page").addEventListener('click', () => {
            renderTableAndPagination(endPage + 1);
        });
    }

    if (!!document.querySelector(".last_page")) {
        document.querySelector(".last_page").addEventListener('click', () => {
            renderTableAndPagination(totalPage);
        });
    }
};

마지막으로 처음에는 1페이지가 보여져야하므로 함수를 한번 실행해준다.

함수에 default 값으로 1이 주어져 있으니 파라미터는 과감하게 생략해본다.

renderTableAndPagination();

마치며, 이전까지 프레임 워크에 존재하는 pagination을 가져다가 사용해보기만 했다. 자바스크립트로 처음부터 pagination을 만들어보면서 

paging의 원리를 이해할 수 있는 시간이 되었던 것 같다.

앞으로 어떤 프레임 워크를 사용할지 모르겠지만 프레임 워크 기능 의존하는 것은 지양해야겠다.

간단한 것부터 다져보며 생각하는 것을 습관해야겠다. 프레임워크의 기능을 사용해보기 전에 원리부터 다져보도록 하자.