js로 page 정보 표시하기

js로 page 정보를 표시합니다.

 

 

페이지 api는 아래 참조

https://web.todaycoding.com/entry/PHP-list-api-paging-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0

PHP list api paging 구현하기

 

 

주문 정보 조회

const page = 1;
$.ajax({
  url: '/api_order.php',
  method: 'POST',
  data: {
    page: page,
  },
  dataType: 'json',
  success: function(response) {
    const order_info = response.data;
    updatePagination(order_info.pagination);
  },
  error: function() {
    alert('Failed to load data.');
  }
});

 

 

 

페이지 표시 영역

<div class="pagenation"></div>

 

 

페이지 링크 생성

function updatePagination(pagination) {

  const paginationContainers = document.querySelectorAll('.pagenation');
  paginationContainers.forEach(paginationContainer => {
      paginationContainer.innerHTML = ''; // 페이지 영역 초기화
      const createPageButton = (page, label, disabled = false) => {
          const pageDiv = document.createElement('div');
          pageDiv.className = `page page_btn ${disabled ? 'disabled' : ''} ${pagination.current_page === page ? 'active' : ''}`;
          const urlParams = new URLSearchParams(window.location.search);
          urlParams.set('page', page);
          const newUrl = `?${urlParams.toString()}`;
          const link = document.createElement('a');
          link.href = newUrl;
          link.className = 'link';
          link.textContent = label || page;
          pageDiv.appendChild(link);
          return pageDiv;
      };

      // 맨 앞으로 가기
      paginationContainer.appendChild(createPageButton(1, '<<', pagination.current_page === 1));

      // 이전 페이지로 가기
      if (pagination.current_page > 1) {
          paginationContainer.appendChild(createPageButton(pagination.current_page - 1, '<'));
      } else {
          paginationContainer.appendChild(createPageButton(1, '<', true));
      }

      // Page numbers
      const pagesPerGroup = 10;
      const startPage = Math.floor((pagination.current_page - 1) / pagesPerGroup) * pagesPerGroup + 1;
      const endPage = Math.min(startPage + pagesPerGroup - 1, pagination.total_pages);

      for (let i = startPage; i <= endPage; i++) {
          paginationContainer.appendChild(createPageButton(i, i, pagination.current_page === i));
      }

      // 다음 페이지로
      if (pagination.current_page < pagination.total_pages) {
          paginationContainer.appendChild(createPageButton(pagination.current_page + 1, '>'));
      } else {
          paginationContainer.appendChild(createPageButton(pagination.total_pages, '>', true));
      }
      // 맨 뒤로 가기
      paginationContainer.appendChild(createPageButton(pagination.total_pages, '>>', pagination.current_page === pagination.total_pages));

  });

}