개발 일지 22 - 페이지 이동

페이지를 이동할때 다른 사이트를 보면 다음, 이전 버튼만 있는 것이 아니라 직접 숫자를 입력을 해서 해당 번호 페이지로 넘어가는 기능이 있다.

 

똑같이 구현을 하고 싶어서 어떻게 해야 할지 고민을 했다. 

 

form 형식으로 보내서 구현을 해야 하나? 아니면 하나씩 다 적는 하드 코딩을 해야 할까?

고민 끝에 자바 스크립트 코드를 이용하면 훨씬 간단해진다는 것을 알았다.

 

 

<div id="pagePopup" class="page-popup" >
     <input type="number" id="pageInput" min="1" max="{{ page_obj.paginator.num_pages }}" placeholder="페이지 번호 입력"> 
     <button id="movePageBtn">이동</button>
     <div id="pageWarning" style="color: red; display: none;">잘못된 입력입니다!</div>
</div>

 

위와 같이 코드를 만들어준다. input에 최소 최대 값을 정해준다.

 

document.getElementById("movePageBtn").addEventListener("click", function() {
         var input = document.getElementById("pageInput");
         var pageNumber = parseInt(input.value);
         var maxPage = parseInt(input.max);
         var minPage = parseInt(input.min);
         var warning = document.getElementById("pageWarning");
                            
         // 입력 값이 없는 경우
       if (!input.value) {
             warning.textContent = "페이지 번호를 입력하세요!";
             warning.style.display = "block";
             return;
                                }
                            
                                // 입력 값이 최소값과 최대값 사이인지 확인
       if (pageNumber < minPage || pageNumber > maxPage) {
             warning.textContent = `페이지 번호는 ${minPage}에서 ${maxPage} 사이여야 합니다.`;
             warning.style.display = "block";
            return;
      }
                            
      // 경고 메시지 숨김
       warning.style.display = "none";
                            
      // 해당 페이지로 이동
      window.location.href = "?page=" + pageNumber;
});

위에는 입력된 값이 없거나 페이지의 수를 넘어버릴 경우 경고 메시지를 출력하는 부분과 정확한 값을 입력을 했을때 페이지가 넘어가는 부분으로 구성했다.

 

 

window.location.href는 현재 페이지의 전체 URL을 나타낸다. 이 값을 변경하게 되면 브라우저는 자동으로 해당 URL로 이동을 하게 된다. pageNumber값에는 내가 입력한 페이지의 값이 입력이 되어있다. 

 

결과적으로 ?page=2 이런 식의 코드가 만들어지면서 페이지가 이동한다.