Grid 페이징
Ignite UI for Angular Grid에서 Paging은 루트 igx-grid 컴포넌트에서 초기화되며 paging 및 perPage 입력으로 설정할 수 있습니다.
데모
페이징은 해당 기능이 사용되는지 여부를 제어하는 불 속성이며 perPage 속성은 페이지당 표시할 수 있는 레코드를 제어합니다. 페이징을 활성화하기 위해 Grid를 업데이트합니다:
<igx-grid #grid [data]="data" [height]="'500px'" [width]="'100%'" [displayDensity]="'cosy'">
<igx-paginator [perPage]="10">
</igx-paginator>
</igx-grid>
페이징 영역은 초기화 중에 템플릿 참조가 Grid에 전달되는 경우 사용자가 템플릿화를 할 수 있습니다. 아래 예제는 페이징이 입력을 통해 제어되는 템플릿입니다.
<igx-grid #grid [data]="data" [height]="'500px'" [width]="'100%'" [displayDensity]="'cosy'">
<igx-paginator [perPage]="10">
</igx-paginator>
</igx-grid>
페이징은 paginate, previousPage, nextPage 메소드를 사용하여 Grid API를 통해 프로그래밍 방식으로 실행할 수도 있습니다:
// Go to page 6
this.grid.paginate(5);
// Go to previous/next page
this.grid.previousPage();
this.grid.nextPage();
// Check for first/last page
this.grid.isFirstPage;
this.grid.isLastPage;
// Get the number of pages
this.grid.totalPages;
// Change the number of records per page
this.grid.perPage = 25;
// Enables/disables paging
this.grid.paging = false;
원격 데이터
페이징은 원격 데이터에서도 작동할 수 있습니다.
먼저 서비스를 선언하여 데이터 가져오기를 실행합니다. 페이지 수를 계산하기 위해 모든 데이터 항목 수가 필요하며 이 논리를 서비스에 추가할 것입니다.
@Injectable()
export class RemoteService {
public remoteData: BehaviorSubject<any[]>;
private url: string = "https://www.igniteui.com/api/products";
constructor(private http: HttpClient) {
this.remoteData = new BehaviorSubject([]);
}
public getData(index?: number, perPage?: number): any {
let qS = "";
if (perPage) {
qS = `?$skip=${index}&$top=${perPage}&$count=true`;
}
this.http
.get(`${this.url + qS}`).pipe(
map((data: any) => {
return data;
})
).subscribe((data) => this.remoteData.next(data));
}
public getDataLength(): any {
return this.http.get(this.url).pipe(
map((data: any) => {
return data.length;
})
);
}
}
서비스를 선언 한 후에는 Grid 생성 및 데이터 서브스크립션을 위한 컴포넌트를 작성해야 합니다.
export class RemotePagingGridSample implements OnInit, AfterViewInit {
public data: Observable<any[]>;
constructor(private remoteService: RemoteService) {}
public ngOnInit() {
this.data = this.remoteService.remoteData.asObservable();
this._dataLengthSubscriber = this.remoteService.getDataLength().subscribe((data) => {
this.totalCount = data;
this.totalPages = Math.ceil(data / this.perPage);
this.buttonDeselection(this.page, this.totalPages);
});
}
}
요청된 페이지에 대한 데이터만 가져오고 선택된 페이지 및 perPage에 따라 정확한 skip 및 top 매개 변수를 원격 서비스에 전달하려면 사용자 호출 템플릿을 생성해야 합니다.
또한, 호출 버튼의 비활성화 및 활성화도 관리해야 합니다.
<ng-template #customPager>
<button [disabled]="firstPage" (click)="paginate(0, false)" igxButton="icon" igxRipple igxRippleCentered="true">
<igx-icon fontSet="material">first_page</igx-icon>
</button>
<button [disabled]="firstPage" (click)="previousPage()" igxButton="icon" igxRipple igxRippleCentered="true">
<igx-icon fontSet="material">chevron_left</igx-icon>
</button>
<span>{{ page + 1 }} of {{totalPages}}</span>
<button [disabled]="lastPage" (click)="nextPage()" igxRipple igxRippleCentered="true" igxButton="icon">
<igx-icon fontSet="material">chevron_right</igx-icon>
</button>
<button [disabled]="lastPage" (click)="paginate(totalPages - 1, false)" igxButton="icon" igxRipple igxRippleCentered="true">
<igx-icon fontSet="material">last_page</igx-icon>
</button>
<select style="margin-left: 1rem;" (change)="perPage = parseToInt($event.target.value);">
<option [value]="val" [selected]="perPage == val" *ngFor="let val of [5, 10, 15, 25, 50, 100, 500]">{{ val }}</option>
</select>
</ng-template>
@ViewChild("customPager", { read: TemplateRef })
public remotePager: TemplateRef<any>;
public nextPage() {
this.firstPage = false;
this.page++;
const skip = this.page * this.perPage;
const top = this.perPage;
this.remoteService.getData(skip, top);
if (this.page + 1 >= this.totalPages) {
this.lastPage = true;
}
}
public previousPage() {
this.lastPage = false;
this.page--;
const skip = this.page * this.perPage;
const top = this.perPage;
this.remoteService.getData(skip, top);
if (this.page <= 0) {
this.firstPage = true;
}
}
public paginate(page: number, recalc: true) {
this.page = page;
const skip = this.page * this.perPage;
const top = this.perPage;
if (recalc) {
this.totalPages = Math.ceil(this.totalCount / this.perPage);
}
this.remoteService.getData(skip, top);
this.buttonDeselection(this.page, this.totalPages);
}
public buttonDeselection(page: number, totalPages: number) {
...
}
...
public ngAfterViewInit() {
this.remoteService.getData(0, this.perPage);
this.grid.paginationTemplate = this.remotePager;
}
마지막 단계는 그리드의 템플릿을 선언하는 것입니다.
<igx-grid #grid [data]="data | async" width="960px" height="550px">
<igx-column field="ID"></igx-column>
<igx-column field="ProductName"></igx-column>
<igx-column field="QuantityPerUnit"></igx-column>
<igx-column field="SupplierName"></igx-column>
<igx-column field="UnitsInStock"></igx-column>
<igx-column field="Rating"></igx-column>
<igx-paginator [perPage]="10">
</igx-paginator>
</igx-grid>
이것으로 샘플을 실행할 수 있습니다. 또한, 페이징 템플릿을 런타임에서 변경할 수 있는 옵션을 추가하여 샘플을 더 확장할 수 있습니다. 다음은 실행 방법을 보여 줍니다. 먼저 템플릿에 하나 더 페이징 템플리트를 추가합니다:
<ng-template #secCustomPager let-api>
<button [disabled]="firstPage" (click)="previousPage()" igxButton="flat" igxButtonColor="#09f">
PREV
</button>
<span *ngIf="shouldShowFirstPage" (click)="paginate(0, false)"><a class="pageNavLinks" [routerLink]=''>{{1}}</a> ...</span>
<span *ngFor="let item of pages" (click)="paginate(item, false)">
<a class="pageNavLinks {{activePage(item)}}" [routerLink]=''>{{item + 1}}</a>
</span>
<span *ngIf="shouldShowLastPage" (click)="paginate(totalPages - 1, false)">... <a class="pageNavLinks" [routerLink]=''>{{ totalPages }}</a></span>
<button [disabled]="lastPage" (click)="nextPage()" igxButton="flat" igxButtonColor="#09f">
NEXT
</button>
</ng-template>
그 후, 이미 생성된 메소드를 다른 추가 로직을 사용해 확장해야 합니다:
// the same also applies for the methods previousPage() and paginate(page: number, recalc: true)
public nextPage() {
...
if (this.grid1.paginationTemplate === this.secondPagerTemplate) {
this.setNumberOfPagingItems(this.page, this.totalPages);
}
}
// creates an array with the visible page numbers where the user can navigate according to the current page and the total page number
public setNumberOfPagingItems(currentPage, totalPages) {
....
}
마지막으로 사용자가 런타임에서 페이저 템플릿을 변경할 수 있는 버튼을 추가합니다:
<button (click)="changeTemplate()" class='changeBtn' igxButton="flat"
igxButtonColor="#09f" igxButtonBackground="#dadada">Change Paging Template</button>
public changeTemplate() {
if (this.grid1.paginationTemplate === this.remotePager) {
this.grid1.paginationTemplate = this.secondPagerTemplate;
this.setNumberOfPagingItems(this.page, this.totalPages);
} else {
this.pages = [];
this.grid1.paginationTemplate = this.remotePager;
}
this.grid1.cdr.detectChanges();
}
상기의 모든 변경 후 다음과 같은 결과가 됩니다.
데모
샘플을 이와 똑같이 보이게 하려면 사용자 페이징 테마를 적용해야 합니다:
@import '~igniteui-angular/lib/core/styles/themes/index';
@include core();
@include theme($default-palette, $legacy-support: true);
$custom-paginator-theme:grid-paginator-theme(
$text-color: #09f
);
$custom-button-theme:button-theme(
$icon-color: #09f,
$icon-hover-color: #dadada,
$icon-focus-color:rgb(0, 119, 255),
$icon-focus-background: #aeaeae
);
.customPager {
@include grid-paginator($custom-paginator-theme);
@include button($custom-button-theme);
}
Paging with Group By
Integration between Paging and Group By is described in the Group By topic.
API 참조
추가 리소스
커뮤니티는 활동적이고 새로운 아이디어를 항상 환영합니다.
View page on
GitHub
GitHub