vanillaJS 페이지네이션 구현

각 구현되는 조건에 따라 파마리터명은 다르겠지만 초기 설정값을 정한다.

보통 화면 구현에는 이런 형식을 많이 사용하는 편인거 같다. 각 회사마다 다른 이름을 사용하고 있으니 참고!

• pageNum: 현재 페이지
• pageSize: 한 페이지 당 나타낼 데이터의 갯수
• totalRow: 총 데이터의 갯수
• pageCount: 페이지 리스트 갯수

 

---

 

 

1. 먼저 페이징할 수 있는 데이터를 만들기 대략적으로 데이터가 담긴 리스트를 먼저 만들어 본다.

혹은 json-server등 유용한 API를 사용해도 무관하다. 

const someList = [];

for (let i = 1; i <= 127; i++) {

someList.push(`item${i}`);

}

 

i의 갯수 즉  totalRow는 임의로 127개의 아이템이 있는 배열을 생성했다. 

콘솔로 확인해보면 이렇게 리스트가 만들어진다. 

someList:  [
  'item1',  'item2',  'item3',  'item4',   'item5',  'item6',
  'item7',  'item8',  'item9',  'item10',  'item11', 'item12',
  'item13', 'item14', 'item15', 'item16',  'item17', 'item18',
  'item19', 'item20', 'item21', 'item22',  'item23', 'item24',
  'item25', 'item26', 'item27', 'item28',  'item29', 'item30',
  'item31', 'item32', 'item33', 'item34',  'item35', 'item36',
  'item37', 'item38', 'item39', 'item40',  'item41', 'item42',
  'item43', 'item44', 'item45', 'item46',  'item47', 'item48',
  'item49', 'item50', 'item51', 'item52',  'item53', 'item54',
  'item55', 'item56', 'item57', 'item58',  'item59', 'item60',
  'item61', 'item62', 'item63', 'item64',  'item65', 'item66',
  'item67', 'item68', 'item69', 'item70',  'item71', 'item72',
  'item73', 'item74', 'item75', 'item76',  'item77', 'item78',
  'item79', 'item80', 'item81', 'item82',  'item83', 'item84',
  'item85', 'item86', 'item87', 'item88',  'item89', 'item90',
  'item91', 'item92', 'item93', 'item94',  'item95', 'item96',
  'item97', 'item98', 'item99', 'item100',
  ... 27 more items
]

 

 

2.  페이지를 자르는 기준을 세우기

const page = pageNum

const limit = pageSize

 

매개변수 page, limit을 가지고 배열을 자르려 한다. 

시작과 끝 인덱스 번호를 가지고 리스트를 slice해서 리턴을 시킨다. 

 

- startIndex는 현재 페이지의 -1 

- endIndex는 구해진 startIndex와 보여질 페이지 limit을 더한다. 

const pagination = (page, limit, list) => {

/**

* 어디서 부터 어디까지 출력 시킬것인지

* slice : index를 이용해서 자름 (endIndex앞에자름)

*/

const startIndex = (page - 1) * limit;

const endIndex = startIndex + limit;

return list.slice(startIndex, endIndex);

};

const sliced = pagination(1, 10, someList);

 

그럼 sliced된 페이지의 리스트 목록이 이런식으로 출력이 된다. 

pagination(1, 10, someList);

sliced:  [
  'item1', 'item2',
  'item3', 'item4',
  'item5', 'item6',
  'item7', 'item8',
  'item9', 'item10'
]

 

그럼 페이지 넘버랑, 페이지 개수를 바꿔서 만들어 보면

현재 페이지를 2페이지로, 8개의 아이템을 생성했을 때

1페이지는 item1 ~ item8까지 8개의 아이템이 생성되고, 2페이지는 아래처럼 만들어 진다. 

pagination(2, 8, someList);

sliced:  [
  'item9',  'item10',
  'item11', 'item12',
  'item13', 'item14',
  'item15', 'item16'
]

 

 

3.  페이지 리스트 갯수를 구하기

const totalRow = 127;

const limit = 8;

const pageCount = Math.ceil(totalRow / 8);

 

127을 8로 나누면 15.875의 값이 나오는데, 마지막에 나오는 남은 데이터도 하나의 페이지로 만들어 줘야 하기 때문에 올림을 시켜준다. 

그러면  총 16개의 리스트가 생성된다. 

 

 

4. 현재 위치하고 있는 페이지 보여줄 때 

보통 리스트 데이터 자체를 클라이언트에서 다 관리하진 않는다. 데이터의 갯수나 양이 많아지는 걸 화면에서 부담하는 건 보통 없다. 

그래서 서버측에서 페이지에 맞게 일정한 리스트를 내려주곤 하는데, 클릭된 리스트가 몇 페이지 인지 확인되는 상황이 필요할 때는 현재 페이지를 보여줄 페이지 개수로 나눠주면 된다. 

const page = 10;

const pageSize = 5;

const currentPage = Math.ceil(page / pageSize);

 

currentPage는 2가 된다. 

여기서 5 이하의 숫자가 page로 들어가면 1이 나온다. 

 

 

* 이 외에 prev, next버튼의 활성화라던지, 처음과 끝으로 이동되는 페이지 버튼이 사용되는 경우도 많다. 

이 글은 단순히 페이지네이션에 대한 쉬운 접근을 하기위해서 끄적끄적 적어보았다.