데이터가 많아지면 로딩이 오래걸리기 마련이다.
때문에 페이지네이션으로 데이터를 일정하게 끊어서 화면에 뿌려주면
로딩 속도가 빨라질 수 있다.
1. Toolbox 플러그인 설치
2. 화면에 List Of Numbers 추가
Start numer : 페이지 시작 숫자
Length of list : 끊을 만큼의 수 계산 (총 페이지 수)
Increment : 증가시킬 수
3. 게시글 Repeating Group 만들기
7개씩 끊으려고 rows도 7로 맞추었다.
아래 Show partial list on last page if needed 설정값은
만약 7개씩 끊었을 때 4개만 남는 경우 마지막 페이지로 보여줄 것인지 선택하라는 거다.
필자는 모든 글을 다 보여주어야 하니 당연히 체크..!
4. 페이지 그룹 만들기
pagination - 페이지:number state 만들어서 현재 페이지 수 관리하면 디자인 적용, 양 끝 화살표로 페이지 이동에 용이하다.
ReapeatingGroup pages - 2.번에 만들었던 페이지 수를 가져온다.
5. 숫자 클릭 워크플로우
3. 에서 만든 RepeatingGroup의 Page를 클릭한 숫자 페이지로 넘긴다.
4.에서 만든 페이지 그룹의 페이지 state도 함께 변경해준다.
6. 양쪽 화살표 클릭 워크플로우
왼쪽 페이지 이동 버튼은 1 보다 클 때만 작동하게 제한을 걸어줘야 하고
오른쪽 페이지 이동 버튼은 총 페이지 수 보다 작을 때만 작동하게 해줘야 한다.
댓글