Angular 그리드 페이징
Pagination is used to split a large set of data into a sequence of pages that have similar content. Angular table pagination improves user experience and data interaction. Grid pagination is configurable via a separate component projected in the grid tree by defining a igx-paginator tag, similar to adding of a column. As in any Angular Table, the pagination in the Grid supports template for custom pages.
Angular Pagination Example
The following example represents Grid pagination and exposes the options usage of items per page and how paging can be enabled. The user can also quickly navigate through the Grid pages via "Go to last page" and "Go to first page" buttons.
Adding a igx-paginator component will control whether the feature is present, you can enable/disable it by using a simple *ngIf with a toggle property. The perPage input controls the visible records per page. Let’s update our Grid to enable paging:
<igx-grid #grid [data]="data" [height]="'500px'" [width]="'100%'">
<igx-paginator [perPage]="10">
</igx-paginator>
</igx-grid>
본보기:
<igx-paginator #paginator [totalRecords]="20">
<igx-paginator-content>
<div id="numberPager" style="justify-content: center;">
<button [disabled]="paginator.isFirstPage" (click)="paginator.previousPage()" igxButton="flat">
PREV
</button>
<span>
Page {{paginator.page}} of {{paginator.totalPages}}
</span>
<button [disabled]="paginator.isLastPage" (click)="paginator.nextPage()" igxButton="flat">
NEXT
</button>
</div>
</igx-paginator-content>
</igx-paginator>
Paging with Group By
그룹 행은 데이터 행과 함께 페이징 프로세스에 참여합니다. 각 페이지의 페이지 크기에 포함됩니다. 축소된 행은 페이징 프로세스에 포함되지 않습니다. 페이징과 그룹화 기준 간의 통합은 그룹화 기준 항목에 설명되어 있습니다.
Usage
igx-paginator이 컴포넌트는 아래 예시의 컴포넌트와igx-grid 함께 사용되지만, 페이징 기능이 필요할 경우 다른 컴포넌트와도 함께 사용할 수 있습니다.
<igx-grid #grid [data]="data">
<igx-paginator #paginator [(page)]="grid.page" [totalRecords]="grid.totalRecords" [(perPage)]="10"
[selectOptions]="selectOptions">
</igx-paginator>
</igx-grid>
Paginator Component Demo
Remote Paging
원격 페이징은 데이터 가져오기를 담당하는 서비스와 그리드 구성 및 데이터 구독을 담당하는 컴포넌트를 선언함으로써 달성할 수 있습니다. 더 자세한 정보는 주제를Grid Remote Data Operations 확인해 주세요.
Remote Paging with Custom Template
In some cases you may want to define your own paging behavior and this is when we can take advantage of the igx-paginator-content and add our custom logic along with it. This section explains how we are going to extend the Remote Paging example in order to demonstrate this.
스타일링
Paginator 스타일링을 시작하려면, 모든 테마 함수와 컴포넌트 믹싱이 있는 파일을 가져와index야 합니다:
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
가장 간단한 방법을 따라, 우리는 를paginator-theme 확장하고 와$text-color$background-color 매개변수를 수용하는 새로운 테마를 만듭니다.$border-color
$dark-paginator: paginator-theme(
$text-color: #d0ab23;,
$background-color: #231c2c,
$border-color: #d0ab23;
);
보시다시피, 이 기능은paginator-theme 페이징 컨테이너의 색상만 제어하며, 페이저 UI의 버튼에는 영향을 주지 않습니다. 버튼들을 스타일링하기 위해 새로운 아이콘 버튼 테마를 만들어봅시다:
$dark-button: icon-button-theme(
$foreground: #d0ab23,
$hover-foreground: #231c2c,
$hover-background: #d0ab23,
$focus-foreground: #231c2c,
$focus-background: #d0ab23,
$disabled-foreground: #9b7829
);
Note
우리가 방금 한 것처럼 색상 값을 하드코딩하는 대신, andpalette 함수를 사용color 해 색상 측면에서 더 큰 유연성을 얻을 수 있습니다. 사용 방법에 대한 자세한 안내는 해당 주제를 참고Palettes 해 주세요.
마지막 단계는 각각 해당 테마가 있는 구성 요소 믹스인을 포함하는 것입니다.
@include css-vars($dark-paginator);
.igx-grid-paginator__pager {
@include css-vars($dark-button);
}
Note
우리는 만든 아이콘-버튼-테마.igx-paginator__pager를 포함시켜, 페이지네이터 버튼만 스타일링할 수 있도록 했습니다. 그렇지 않으면 그리드 내 다른 아이콘 버튼들도 영향을 받을 수 있습니다.
Note
만약 컴포넌트가 ViewEncapsulation을Emulated 사용한다면,penetrate이 캡슐::ng-deep 화를 통해 페이징 컨테이너 내에 있는 컴포넌트를 스타일링해야 합니다. 예를 들어 버튼:
@include css-vars($dark-paginator);
:host {
igx-paginator {
::ng-deep {
@include css-vars($dark-button);
}
}
}
Pagination Style Example
API References
Additional Resources
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
GitHub