자바스크립트 paging 처리

아주 오래전에 페이징을 해보곤 한동안 데이터 연동할 일이 없어서 그냥저냥 지내오다

급 SPA 방식으로 데이터연동을 하게 되면서 자연스레 페이징 작업도 하게 되었다.

이전 자료도 못찾을 뿐더러 기본공식이 있었는데... 생각날리가 만무~

 

어찌어찌 코딩은 했는데......ㅠㅠ

날림 코딩이지만 나름 기록해 두려 한다.

 

function updatePagination( idx, limit, btnLen, total ) {
    //목록이 없을 시 종료.
    if( total === 0 ){
        $('.paging').empty();
        return
    }
    //페이지(한페이지당 limit=10개) 당 총 개수에 대한 넘버 그룹핑(btnLen=5).
    //그룹핑하게 되면 [ [1,2,3,4,5], [6,7,8,9,10], [11] ] 이런형태로 
    var numGroups=numGrouping( total, limit, btnLen);
    //페이지 카운트에 대한 그룹핑 넘버.
    var groupByCount = getGroupByCount( idx+1, btnLen );
    //다중배열에서 그룹핑 넘버를 넘겨 받아서 flat한 배열로 전환.
    var groups=(groupByCount<0)? numGroups[0] : numGroups[groupByCount];
    //총 페이징 개수
    pageCountTotal=Math.ceil( total / limit);
    
    //flat화한 그룹핑 존재가 없다면 여기서 종료.
    if (groups === undefined) {
        return;
    }
    
    var startPoint=groups[0];
    var endPoint=(groups.length< btnLen)? groups[ groups.length-1 ] : groups[btnLen-1];
    //현재 paging
    $('.paging').html( paginationRender( startPoint, endPoint) );

    var numBtn=$('.paging .num');
    numBtn.off('click');

    //위에서 paging에 매번 재 렌더링 되기에 pagination엘리먼트의 active(활성화)값이 매번 갱신되어야 한다.
    var loopLen=numBtn.length;
    for(var i=0;i<loopLen;i++){
        var activeNum=idx%btnLen;
        if( i==activeNum ){
            numBtn.eq(activeNum).addClass('active');
        }else{
            numBtn.eq(i).removeClass('active');
        }
    }

    pageCount=idx;
    numBtn.on('click', function (e) {
        e.preventDefault();
        var clickIdx=$(this).attr('data-index')*1;
        getCurrentList( clickIdx, 'num btn click page' );
        pageCount=clickIdx;
    });

    var prevBtn=$('.bt.prev');
    prevBtn.off('click');
    var nextBtn=$('.bt.next');
    nextBtn.off('click');
    var firstBtn=$('.bt.first');
    firstBtn.off('click');
    var lastBtn=$('.bt.last');
    lastBtn.off('click');

    //pagination 활성화 값이 0일때
    if (pageCount === 0) {
        firstBtn.addClass('disabled');
        prevBtn.addClass('disabled');
        // 총 pagination 개수가 1개 일때 이전/다음/최초/마지막 버튼 숨김.
        if( pageCountTotal===1 ){
            firstBtn.hide();
            prevBtn.hide();
            lastBtn.hide();
            nextBtn.hide();
        }else{
            firstBtn.show();
            prevBtn.show();
            lastBtn.show();
            nextBtn.show();
        }
     //현재 활성화된 pagination 인덱스가 총 pagination 개수와 일치할때 이전/다음 버튼 숨김.
    }else if (pageCount === pageCountTotal - 1) {
        lastBtn.addClass('disabled');
        nextBtn.addClass('disabled');

    }else{
        firstBtn.removeClass('disabled');
        prevBtn.removeClass('disabled');
        lastBtn.removeClass('disabled');
        nextBtn.removeClass('disabled');
    }

    prevBtn.on('click', function (e) {
        e.preventDefault();
         //버튼 비활성화 css클래스가 존재하면 클릭이벤트 비활성.
        if($(this).hasClass('disabled')){ return false}
        pageCount--;
        if( pageCount<=0 ){
            pageCount=0;
        }
        getCurrentList( pageCount, 'prev num btn click page' );
    });
    nextBtn.on('click', function (e) {
        e.preventDefault();
        //버튼 비활성화 css클래스가 존재하면 클릭이벤트 비활성.
        if($(this).hasClass('disabled')){ return false}
        pageCount++;
        if( pageCount>=pageCountTotal-1 ){
            pageCount=pageCountTotal-1;
        }
        getCurrentList( pageCount, 'next num btn click page' );
    });
    firstBtn.on('click', function (e) {
        e.preventDefault();
         //버튼 비활성화 css클래스가 존재하면 클릭이벤트 비활성.
        if($(this).hasClass('disabled')){ return false}
        pageCount=0;
        getCurrentList( pageCount, 'first num btn click page' );
        firstBtn.addClass('disabled');
        prevBtn.addClass('disabled');
    });
    lastBtn.on('click', function (e) {
        e.preventDefault();
         //버튼 비활성화 css클래스가 존재하면 클릭이벤트 비활성.
        if($(this).hasClass('disabled')){ return false}
        pageCount=pageCountTotal-1;
        getCurrentList( pageCount, 'last num btn click page' );
    });

}
//현재 클릭한 인덱스 값으로 그룹핑 1차 인덱스값을 알아낸다.
function getGroupByCount( currentIdx, btnLen ) {
    return Math.ceil( currentIdx/btnLen )-1 ;
}
//total- 총개수
//limit - 한페이지당 리스트 개수 
//pageLen - 화면에 보여줄 버튼 개수 
// [ [], [], [] ....] 2차배열 형식을 만들어 준다.
function numGrouping( total, limit, pageLen ) {
    
    //총페이지카운트=총개수/한페이지당 리스트 개수
    var len = Math.ceil( total / limit);
    
   // 그룹핑총개수=총페이지카운트/화면에 보여줄 paging버튼수
    var pLen=Math.ceil( len/pageLen );
    
    //페이지 카운트 참조 배열.
    var result = [];
    for (var i = 1; i <=len; i++) {
        result.push( i )
    }
    var sort = [];
    for( i=0;i<pLen;i++){
        sort[i] = [];
        for( var j=0;j<pageLen;j++){
            var ln = (i * pageLen) + j;
            //총 페이지 카운트 개수를 넘어가면 멈춤.
            if (ln >= result.length) { break; }
            
            //페이지 카운트를 삽입. 2차배열 안에 페이징 넘버를 삽입한다.
            sort[i].push( result[ln] )
        }
    }
    return sort;
}
//pagination 엘리먼트 생성.
function paginationRender( start, end ) {
    var result =`<a href="" class="bt first"><span class="blind">처음</span></a>\n
    <a href="" class="bt prev"><span class="blind">이전</span></a>`;
    for( var i=start-1;i<end;i++){
        result+=`<a href="" class="num" data-index="${i}">${i+1}</a>`
    }
    result+=`<a href="" class="bt next"><span class="blind">다음</span></a>\n
    <a href="" class="bt last"><span class="blind">맨끝</span></a>`;
    return result;
}