pagination _(수정: 2023.11.13)

* 영어표기가 디폴트, 이하 한글표기

---

2023.11.13 - 1차 수정 / 설명 수정 및 추가

---

 

0. pagination 페이지네이션

- https://en.wikipedia.org/wiki/Pagination

<<   <   1   2  3   >   >>

- paging, 페이징이라고도 하며 정보 목록을 분할하여 출력하는 기능

- 예를 들면 30개의 게시글이 있을 경우, 한 페이지에 10개씩 총 3 페이지로 분할하여 출력하는것

---

1. 사용방법

1). 설치 및 app.module 에 import 

- npm ngx-pagination (https://www.npmjs.com/package/ngx-pagination?activeTab=readme)

import { AppComponent } from './app.component'; import { NgxPaginationModule } from 'ngx-pagination'; . . . @NgModule({   declarations: [     AppComponent, . . .   ],   imports: [     NgxPaginationModule   ], . . .

---

2). 사용하려는 컴포넌트의 html 파일과 ts 파일 세팅

1). html

. . .             <ol>                 <div *ngFor="let item of newArr  //newArr : 게시글 arr                         | paginate : {                          //페이지네이션 옵션                            id: 'testPage',                     //고유 아이디, 사용시 pagination-controls 의 id 와 동일하게 설정                            itemsPerPage: itemNum,  //한 페이지당 게시글 수                            currentPage: curPage,      //현재 페이지                            totalItems: count                //전체 목록 개수                       };                       let i = index">                     <li><a>{{item}}</a></li>                 </div>             </ol>             <pagination-controls id = 'testPage'    previousLabel="<"    nextLabel=">"                  (pageChange)="onTableDataChange($event)">             </pagination-controls>              // previousLabel : 이전 게시물 화살표 라벨              // nextLabel : 다음 게시물 화살표 라벨              // pageChange: 페이지 변경 이벤트 . . .

 

 

2). ts

- html 에서 이벤트 발생시 작동하는 함수 세팅

- 페이지네이션 옵션에 필요한 변수 (한 페이지당 게시글 수: number ... 등)

- 게시글 Arr

. . . itemNum: number = 0;    //현재 페이지당 출력되는 게시물 수 curPage: number = 0;     //현재 페이지 count: number = 0;         //전체 개시글 수 realArr: string[] = [];          //원본 게시글 arr newArr: string[] = [] ;         //출력용 게시글 arr . . .             //페이지네이션 초기 세팅             ngAfterViewInit() {                            this. newArr = Arrat.from(this. realArr);                            this.itemNum = 5;                            this.curPage = 1;                            this.count = this. realArr.length;             } . . .             //페이지 조작시 발동되는 메서드, e: 현재 페이지             onTableDataChange(e: any) {                           this.newArr = [];      //게시글 목록 초기화                           this.curPage = e;    //현재 페이지 세팅                           //한 페이지당 띄울 게시글 배열 세팅                           //ex) 한 페이지당 5개일 경우, this.itemNum = 5;                           //현재 페이지가 3일 경우, this.newArr[15] 부터 출력되어야 하므로 int 세팅                           const int = (e - 1) * this.itemNum;                           const tempArr = Array.from(게시글 목록 데이터);                           this.newArr = tempArr.slice(int, int + this.itemNum );             } . . .

---