jQuery | 페이징 처리 (javaScript)

 

내 댑안 - 시도하는 중

let index;
function setIndex(){ index = (page-1) * count};
	
let Search = {
    page: 1,
    count: 20
}

const totalCount = 100;
const maxPageNumber = totalCount % Search.count == 0
					? Math.floor(totalCount / Search.count)
					: Math.floor(totalCount / Search.count) + 1;
console.log(maxPageNumber);


const startIndex = Search.page % 5 == 0
				? Search.page - 4
				: Search.page - (Search.page % 5 ) + 1; 
                
const endIndex = startIndex + 4 <= maxPageNumber ? startIndex + 4 : maxPageNumber;

 

 

정답 

 

total - 전체 게시물 수

rowCnt - 한페이지 당 게시물 수

navCnt - 아래 페이지 번호를 몇개씩 보여줄 것인지

pageNo - 현재 페이지 번호

 

totalPages - 몇개의 페이지가 존재하는지

totalNavigations - 몇 묶음의 페이지단이 필요한지

(ex) 총 게시물100, 한페이지에 10개의 게시물을 보여주고 페이지번호는 5개씩 보여준다면,

        totalNavigations 는 2개가 된다( 1~5 - 1개 / 6~10 - 1개)

currentNavigation - pageNo 가 속하는 navigation 구역 ( ex ) 3을 택했다면 1~5가 속한 곳에 있음 - 1을 반환 )

 

 

function navigation(total, rowCnt, naviCnt, pageNo) {
  const totalPages = Math.ceil(total / rowCnt); // 전체 페이지 수 계산
  const totalNavigations = Math.ceil(totalPages / naviCnt); // 전체 네비게이션 수 계산
  const currentNavigation = Math.ceil(pageNo / naviCnt); // 현재 페이지의 네비게이션 번호

  let startPage = (currentNavigation - 1) * naviCnt + 1; // 네비게이션의 시작 페이지 번호
  let endPage = Math.min(startPage + naviCnt - 1, totalPages); // 네비게이션의 끝 페이지 번호

  if (startPage < 1) {
    startPage = 1;
  }

  if (endPage > totalPages) {
    endPage = totalPages;
  }

  let navigation = '';

  if (currentNavigation > 1) {
    navigation += '이전 ';
  }

  for (let i = startPage; i <= endPage; i++) {
    if (i === pageNo) {
      navigation += `[${i}] `;
    } else {
      navigation += `${i} `;
    }
  }

  if (currentNavigation < totalNavigations) {
    navigation += '다음';
  }

  console.log(navigation);
}

// 예시 사용
navigation(100, 14, 5, 6);

 

 

[ 결과 ]

- 100개의 게시물을 14개씩 보여준다. 

- 아래 페이지 수는 5개씩 보여주고, 현재 페이지는 6페이지이다.

 

 

 

 

 

 

---

 

Meth.ceil() 

 

숫자를 반올림하여 가장 가까운 정수로 반올림하는 메서드 

 

> 사용 예시

 

 

---

최종

 

수정 - 마지막 페이지일 경우, 남은 게시물 수를 반환하도록

 

function navigation(total, rowCnt, naviCnt, pageNo) {
  const totalPages = Math.ceil(total / rowCnt); // 전체 페이지 수 계산
  const totalNavigations = Math.ceil(totalPages / naviCnt); // 전체 네비게이션 수 계산
  const currentNavigation = Math.ceil(pageNo / naviCnt); // 현재 페이지의 네비게이션 번호

  let startPage = (currentNavigation - 1) * naviCnt + 1; // 네비게이션의 시작 페이지 번호
  let endPage = Math.min(startPage + naviCnt - 1, totalPages); // 네비게이션의 끝 페이지 번호

  if (startPage < 1) {
    startPage = 1;
  }

  if (endPage > totalPages) {
    endPage = totalPages;
  }

  let navigation = '';

  if (currentNavigation > 1) {
    navigation += '이전 ';
  }

  for (let i = startPage; i <= endPage; i++) {
    if (i === pageNo) {
      navigation += `[${i}] `;
    } else {
      navigation += `${i} `;
    }
  }

  if (currentNavigation < totalNavigations) {
    navigation += '다음';
  }
	
  if(pageNo == endPage) {
    const remainingPosts = total - (rowCnt * (totalPages - 1)); // 마지막 페이지의 남은 게시물 수 계산
    navigation += `마지막 페이지 입니다 - (${remainingPosts}개 남음)`;
  }
  console.log(navigation);
  
}

// 예시 사용
navigation(100, 8, 8, 13);