HTML코드를 Javascript(JQuery)로 Paging 처리하기

보여줘야할 데이터 개수가 많은 경우 전체를 보여주고 CSS에서 Overflow 속성을 부여해서 스크롤바로 깔끔하게 보여줄 수도 있겠지만 스크롤바를 사용하고 싶지 않은 경우 주로 페이지 처리를 해서 데이터를 보여주는 경우가 많습니다.

HTML코드에서 보여줘야할 데이터가 많은 경우에 이를 Javascript 특히 해당 포스트에서는 JQuery를 통해 어떻게 해당 데이터들을 Paging처리하고 이를 보여줄 수 있는지를 알려드리겠습니다.

 

(1) HTML

<div>
		<div>
          
        <div class="item1">
          <span>1</span>
        </div>

        <div class="item1">
          <span>2</span>
        </div>

        <div class="item1">
          <span>3</span>
        </div>

        <div class="item1">
          <span>4</span>
        </div>

        <div class="item1">
          <span>5</span>
        </div>

        <div class="item1">
          <span>6</span>
        </div>

        <div class="item1">
          <span>7</span>
        </div>

        <div class="item1">
          <span>8</span>
        </div>
        
        <div class="item1">
          <span>9</span>
        </div>

        <div class="item1">
          <span>10</span>
        </div>

        <div class="item1">
          <span>11</span>
        </div>

        <div class="item1">
          <span>12</span>
        </div>

        <div class="item1">
          <span>13</span>
        </div>

        <div class="item1">
          <span>14</span>
        </div>

        <div class="item1">
          <span>15</span>
        </div>

        <div class="item1">
          <span>16</span>
        </div>

        <div class="item1">
          <span>17</span>
        </div>

        <div class="item1">
          <span>18</span>
        </div>

        <div class="item1">
          <span>19</span>
        </div>

        <div class="item1">
          <span>20</span>
        </div>

		</div>
        
        <div id="paging"></div>
</div>

예를 들어서, 위의 코드와 같이 20개의 data를 보여주는 div 태그들이 있고 이를 5개씩 끊어서 페이지로 보여주고 싶을 때를 가정해봅시다.

 

(2) Javascript(JQuery)

    var totalData = 20;    // 총 데이터 수
    var dataPerPage = 5;    // 한 페이지에 나타낼 데이터 수
    var pageCount = 5;        // 한 화면에 나타낼 페이지 수
    
    function paging(totalData, dataPerPage, pageCount, currentPage){
        
        console.log("currentPage : " + currentPage);
        
        var totalPage = Math.ceil(totalData/dataPerPage);    // 총 페이지 수
        var pageGroup = Math.ceil(currentPage/pageCount);    // 페이지 그룹
        
        console.log("pageGroup : " + pageGroup);
        
        var last = pageGroup * pageCount;    // 화면에 보여질 마지막 페이지 번호
        if(last > totalPage)
            last = totalPage;
        var first = pageCount * (pageGroup - 1) + 1;    // 화면에 보여질 첫번째 페이지 번호
        var next = last+1;
        var prev = first-1;
        
        console.log("last : " + last);
        console.log("first : " + first);
        console.log("next : " + next);
        console.log("prev : " + prev);
 
        var $pingingView = $("#paging");
        
        var html = "";
        
        if(prev > 0)
            html += "<a href='#' id='prev'></a> ";
        
        for(var i=first; i <= last; i++){
            html += "<a href='#' id=" + i + ">" + i + "</a> ";
        }
        
        if(last < totalPage)
            html += "<a href='#' id='next'></a>";
        
        $("#paging").html(html);    // 페이지 목록 생성
        $("#paging a").css("color", "black");
        $("#paging a#" + currentPage).css({"text-decoration":"none", 
                                           "color":"red", 
                                           "font-weight":"bold"});    // 현재 페이지 표시
                                           
        $("#paging a").click(function(){
            
            var $item = $(this);
            var $id = $item.attr("id");
            var selectedPage = $item.text();
            if($id == "next")    selectedPage = next;
            if($id == "prev")    selectedPage = prev;

            $(".item1").each((index, item)=> {
                if($(item).hasClass(selectedPage)) {
                    $(item).show();
                }
                else {
                    $(item).hide();
                }
            });
            
            paging(totalData, dataPerPage, pageCount, selectedPage);
        });
                                           
    }
    
    $("document").ready(function(){
        let count = 0;
        let page = 1;
        $(".item1").each((index, item)=> {
            count++;
            if(count > dataPerPage) {
                count = 1;
                page++;
            }
            $(item).addClass("" + page);
            if($(item).hasClass(1)) {
                $(item).show();
            }
            else {
                $(item).hide();
            }
        });
        paging(totalData, dataPerPage, pageCount, 1);
    });

각 상황에 맞게 totalData, dataPerPage, pageCount 변수에 특정 값을 할당하고 나서 $("document").ready() 부분은 문서가 로드되면 즉시 실행되므로 가장 먼저 실행되고 이 때 count와 page 변수를 통해 item1이라는 class를 가진 html 태그 전체를 each구문을 통해 하나하나 돌면서 dataPerPage 개수만큼씩 addClass를 통해 숫자로 된 class를 추가하였습니다. 이후 가장 먼저 보여줄 1번째 페이지에서는 전체 item1 class html 태그 중 1이라는 class를 가지고 있는지를 hasClass를 통해 검사하고 가지고 있다면 show()를 통해 보여주고 가지고 있지 않다면 hide()를 통해 숨김으로써 첫 번째 페이지에서 보여주고 싶은 dataPerPage만큼의 데이터만 보여주게 됩니다. 이후 paging 함수를 호출시킵니다.

paging 함수에서는 총 페이지 수와 페이지 그룹, 화면에 보여질 마지막 페이지 번호와 화면에 보여질 첫번째 페이지 번호를 계산을 통해 변수화하고나서 paging이라는 id를 가진 html 태그를 불러옵니다. 해당 태그는 HTML코드에서 가장 하단에 있는 태그로 해당 태그에서는 페이지(1 2 3 4 5 etc..)를 표시하기 위해 가장 하단에 배치하였습니다. 이후 html이라는 문자열에 만약 prev(현재 보여질 첫번째 페이지 번호보다 1 작은 값)가 0보다 크다면 현재가 첫 번째 페이지 그룹이 아니라는 의미로 앞서 더 보여줄 게 있으므로 a태그를 부여하고 id에 prev를 할당합니다. 이후 for구문을 통해 first부터 last까지 현재 보여질 첫 번째 페이지번호부터 마지막 페이지 번호까지 각각 a태그를 부여하고 id에 해당 숫자 값을 부여합니다. 이후 last(현재 보여질 마지막 페이지 번호보다 1 큰 값)가 totalPage보다 작다면 아직 남은 페이지그룹이 존재한다는 의미이므로 a태그를 부여하고 id에 next를 할당합니다.

이후 해당 html 문자열을 JQuery의 html() 함수를 통해 paging이라는 id를 가진 html 태그에 추가하고 css를 부여합니다. 특히 현재 페이지에 해당하는 태그에는 css를 다르게 부여해서 사용자가 현재페이지를 인식할 수 있도록 만들었습니다. 이후 paging id를 가진 html 태그 하위의 a 태그를 클릭했을 때(이는 html문자열로 추가한 부분에 해당합니다.) 현재 값을 받아오고 해당 속성 중 id값을 조사하여 이를 변수에 할당합니다. 만약 id가 next나 prev였다면 해당되는 숫자값을 할당합니다. 이후 item1의 class를 가진 html 태그 전체를 each를 통해 돌면서 각 태그에 hasClass를 통해 현재 페이지에 해당하는 class를 가지고 있는지를 검사하고 가지고 있다면 show()를 통해 보여주고 아니면 hide()를 통해 숨겨서 현재 페이지에서 보여주고자 하는 dataPerPage만큼의 데이터만 보여주게 구현하였습니다. 이후 paging을 다시 호출해서 현재 페이지를 리랜더링(새로고침)하고 있습니다.