Angular 그리드 페이징
페이지네이션은 많은 데이터를 유사한 내용을 가진 페이지 연속으로 분할하는 데 사용됩니다. Angular 테이블 페이지네이션은 사용자 경험과 데이터 상호작용을 향상시킵니다. 그리드 페이지네이션은 태그를 정의하여igx-paginator 별도의 컴포넌트를 그리드 트리에 투영하여 구성할 수 있으며, 이는 열을 추가하는 것과 유사합니다. 모든 Angular 테이블과 마찬가지로, 그리드의 페이지 배치는 사용자 지정 페이지용 템플릿을 지원합니다.
Angular Pagination Example
다음 예시는 그리드 페이지네이션을 나타내며, 옵션 사용items per page 법과 페이징 활성화 방법을 설명합니다. 사용자는 "마지막 페이지로 이동"과 "첫 페이지로 이동" 버튼을 통해 그리드 페이지를 빠르게 탐색할 수도 있습니다.
컴포넌트를igx-paginator 추가하면 해당 기능이 있는지 여부를 제어할 수 있으며, 토글 속성이 있는 간단한*ngIf 기능을 사용해 활성화/비활성화할 수 있습니다. 입력은perPage 페이지당 보이는 기록을 제어합니다. 페이지 전환을 가능하게 하기 위해 그리드를 업데이트해 봅시다:
<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
경우에 따라 직접 페이징 동작을 정의하고 싶을 수도 있는데, 이럴 때 저희가 이를 활용igx-paginator-content 하고 커스텀 로직을 추가할 수 있습니다.이 섹션에서는 원격 페이징 예제를 확장하여 이를 시연하는 방법을 설명합니다.
스타일링
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