페이지네이션 js 코드

재사용할 수 있게 만들어본 페이지네이션 코드이다.

 

부트스트랩을 적용해서 동적으로 페이지네이션을 생성할 때 사용할 수 있다.

1페이지에 5개의 항목을 기준으로 페이지네이션을 진행하고 있다.

 

서버에서 int totalCount, List<내용객체> list 를 응답값으로 전달한다. 

응답값을 js파일에서 그려주면서 아래의 createPagination()을 실행해주면 된다.

 

/**
 * 페이지네이션을 그려주는 함수
 * @param totalCount 총 결과수
 * @param currentPage 현재 페이지
 * @param keyword 검색어
 */
function createPagination(totalCount, currentPage, keyword){


    /**
     * 현재 페이지 몇인지 받아오기
     * totalCount 로 페이지 몇까지 나오는지 계산하고
     * 페이지 범위 계산하기
     */

    // 총 페이지 수
    const totalPages = Math.ceil(totalCount/5);

    // 시작 페이지
    let startRange = Math.floor((currentPage - 1) / 5) * 5 + 1;
    // 끝 페이지
    let endRange = startRange + 4;


    const paginationUlTag = document.getElementById("pagination");
    let newHTML = "";

    // 이전 페이지 이동 버튼 생성
    let before = startRange-1;
    if(currentPage>5){
        newHTML +=
            '<li class="page-item">' +
            '    <a class="page-link" onclick="roadAddrApi('+before+',\''+keyword+'\')" aria-label="Previous">' +
            '        <span aria-hidden="true">&laquo;</span>' +
            '    </a>' +
            '</li>';

    }

    // 페이지 숫자 생성
    for (let i = startRange; i <= endRange; i++) {

        if(i == currentPage){
            newHTML +=  '<li class="page-item active"><a class="page-link" onclick="roadAddrApi('+i+',\''+keyword+'\')">'+i+'</a></li>';
        }else if(i>totalPages){
            break;
        }else{
            newHTML +=  '<li class="page-item"><a class="page-link" onclick="roadAddrApi('+i+',\''+keyword+'\')">'+i+'</a></li>';
        }
    }

    // 다음 페이지 이동 버튼 생성
    let next = endRange+1;
    if(totalPages-endRange>=1){
        newHTML +=
            '<li class="page-item">' +
            '    <a class="page-link" onclick="roadAddrApi('+next+',\''+keyword+'\')" aria-label="Next">' +
            '        <span aria-hidden="true">&raquo;</span>' +
            '    </a>' +
            '</li>';
    }
    paginationUlTag.innerHTML = newHTML;

}