[Front end] JavaScrpit 페이징 처리

Reference M1 2020. 2. 5. 00:05

자바스크립트를 이용한 페이징 처리 방법이다.

페이징 파라미터
appendEle : Element
totalCount : 데이터 총 카운트
recordsPerPage : 페이지 데이터 레코드 개수
navPage : 페이지 개수
currentPage : 현재 페이지
sellBoolean : 맨앞, 맨뒤 표현 여부

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Paging</title>
<style type="text/css">
.paging a {
    font-size: 1.500rem;
}

.paging a.on {
    text-decoration: none;
    color: #FF0000;
    font-weight: bold;
}
</style>
<script type="text/javascript"  src="./jquery-3.3.1.min.js"></script>
</head>

<body>
    <div class="paging"></div>
</body>

<script type="text/javascript">

    const common = {
        totalCount : 1000,
        recordsPerPage : 10,
        navPage : 10
    };
    
    $('document').ready(function(){

        // 페이지 정보 초기화
        setPageInfo(common.recordsPerPage, common.navPage, 1);
        
        // 데이터 조회
        selectDataList();
    });

    // 데이터 조회
    function selectDataList() {

        // Ajax Success 이후 paging Set 설정
        const pageInfo = getPageInfo();
        paging($('.paging'), common.totalCount, pageInfo.recordsPerPage, pageInfo.navPage, pageInfo.currentPage, true);
    }

    // 페이징
    // appendEle      : Element
    // totalCount     : 데이터 총 카운트
    // recordsPerPage : 페이지 데이터 레코드 개수
    // navPage        : 페이지 개수
    // currentPage    : 현재 페이지
    // sellBoolean    : 맨앞, 맨뒤 표현 여부
    function paging(appendEle, totalCount, recordsPerPage, navPage, currentPage, sellBoolean){
        
        const totalPage = Math.ceil(totalCount / recordsPerPage);   // 총 페이지 수
        const pageGroup = Math.ceil(currentPage / navPage);         // 페이지 그룹
        
        let last = pageGroup * navPage;    // 화면에 보여질 마지막 페이지 번호
        if (last > totalPage) {
            last = totalPage;
        }

        const first = last - (navPage - 1); // 화면에 보여질 첫번째 페이지 번호

        const foreFront = 1;
        const prev = first - 1;
        const next = last + 1;
        const rearMost = totalPage;
        
        console.log('foreFront   : ' + foreFront);    // 맨앞            ( << )
        console.log('first       : ' + first);
        console.log('prev        : ' + prev);         // 이전 페이지 번호 ( < )
        console.log('currentPage : ' + currentPage);
        console.log('next        : ' + next);         // 다음 페이지 번호 ( > )
        console.log('last        : ' + last);
        console.log('rearMost    : ' + totalPage);    // 맨뒤            ( >> )
        
        let innerHtml = '';
        
        // 맨앞, 이전 Set
        if (prev > 0) {
            sellBoolean ? innerHtml += '<a href=# onclick="movePage(' + foreFront + ')"> << </a>' : innerHtml += '';
            innerHtml += '<a href=# onclick="movePage(' + prev + ')"> < </a> ';
        }
        
        // 페이지 Set
        for (let i=first; i<=last; i++) {
            if (currentPage === i) {
                innerHtml += '<a href=# class="on" onclick="movePage(' + i + ')">' + i + '</a> ';
            } else {
                innerHtml += '<a href=# onclick="movePage(' + i + ')">' + i + '</a> ';
            }
        }
        
        // 다음, 맨뒤 Set
        if (last < totalPage) {
            innerHtml += '<a href=# onclick="movePage(' + next + ')"> > </a>';
            sellBoolean ? innerHtml += '<a href=# onclick="movePage(' + rearMost + ')"> >> </a>' : innerHtml += '';
        }
        
        // 페이지 생성
        appendEle.empty();
        appendEle.append(innerHtml);                               
    }

    // 페이지 이동
    function movePage(currentPage) {

        const pageInfo = getPageInfo();
        setPageInfo(pageInfo.recordsPerPage, pageInfo.navPage, currentPage);
        
        selectDataList();
    }

    // Page 정보 set
    function setPageInfo(recordsPerPage, navPage, currentPage) {
        
        const pageInfo = {
                recordsPerPage: recordsPerPage,
                navPage: navPage,
                currentPage: currentPage
        };

        sessionStorage.setItem('pageInfo', JSON.stringify(pageInfo));
    }

    // Page 정보 get
    function getPageInfo() {
        return JSON.parse(sessionStorage.getItem('pageInfo'));
    }
</script>
</html>

sellBoolean true 일때 (맨앞 맨뒤 미 표출)

sellBoolean false 일때(맨앞 맨뒤 표출)