Angular 그리드 페이징

페이지 매김은 많은 양의 데이터를 유사한 콘텐츠가 있는 일련의 페이지로 분할하는 데 사용됩니다. Angular 테이블 페이지 매김은 사용자 경험과 데이터 상호 작용을 개선합니다. 그리드 페이지 매김은 열을 추가하는 것과 유사하게 igx-paginator 태그를 정의하여 그리드 트리에 투사된 별도의 구성 요소를 통해 구성할 수 있습니다. 모든 Angular 테이블에서와 마찬가지로 그리드의 페이지 매김은 사용자 지정 페이지에 대한 템플릿을 지원합니다.

Angular Pagination Example

다음 예는 그리드 페이지 매김을 나타내며 items per page의 옵션 사용법과 페이징을 활성화할 수 있는 방법을 보여줍니다. 사용자는 "마지막 페이지로 이동" 및 "첫 번째 페이지로 이동" 버튼을 통해 그리드 페이지를 빠르게 탐색할 수도 있습니다.

import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { IgxGridComponent, IgxPaginatorComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxLinearProgressBarComponent } from 'igniteui-angular';
import { athletesData } from '../../data/athletesData';
import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive';
import { DecimalPipe } from '@angular/common';

@Component({
    encapsulation: ViewEncapsulation.None,
    selector: 'app-grid-sample',
    styleUrls: ['./grid-paging-sample.component.scss'],
    templateUrl: 'grid-paging-sample.component.html',
    imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxLinearProgressBarComponent, DecimalPipe]
})

export class PagingSampleComponent implements OnInit {
    @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent;
    public data: any[];

    public ngOnInit(): void {
        this.data = athletesData;
    }
}
ts

<div class="grid__wrapper">

    <igx-grid [igxPreventDocumentScroll]="true" #grid1 [data]="data" height="500px" width="100%">
        <igx-paginator [perPage]="10"></igx-paginator>
        <igx-column header="Rank" headerClasses="myClass" field="Id" [sortable]="true"></igx-column>
        <igx-column field="Name" header="Athlete"></igx-column>
        <igx-column field="BeatsPerMinute" header="Beats per minute" dataType="number">
            <ng-template igxCell let-val>
                <div class="cell__inner">
                    {{ val }}
                </div>
            </ng-template>
        </igx-column>
        <igx-column field="TopSpeed" header="Top Speed" dataType="number">
            <ng-template igxCell let-val>
                <div class="cell__inner">
                    {{ val | number: '1.1-5' }}
                </div>
            </ng-template>
        </igx-column>
        <igx-column field="TrackProgress" header="Track Progress">
            <ng-template igxCell let-val>
                <div class="linear-bar-container">
                    <igx-linear-bar [textVisibility]="false" class="cell__inner_2" [value]="val"></igx-linear-bar>
                </div>
            </ng-template>
        </igx-column>
        <igx-column field="CountryFlag" header="Country">
            <ng-template igxCell let-cell="cell">
                <div class="cell__inner_2">
                    <span>
                        <img [src]="cell.value" class="flag" />
                    </span>
                </div>
            </ng-template>
        </igx-column>
    </igx-grid>
</div>
html

@use '../../../variables' as *;

$progressBar-sample-theme: progress-linear-theme(
    $track-color: rgba(181,181,181, .5),
    $fill-color-default: orange
);

.grid__wrapper {
    @include progress-linear($progressBar-sample-theme);

    --ig-size: var(--ig-size-medium);
    margin: 0 16px;
    padding-top: 10px;
}

.cell__inner,
.cell__inner_2 {
    display: flex;
    align-items: center;
    height: 100%;
}

.cell__inner {
    position: relative;
    justify-content: space-between;
}

.linear-bar-container {
    width: 100%;
}
scss

Like this sample? Get access to our complete Ignite UI for Angular toolkit and start building your own apps in minutes. Download it for free.

igx-paginator 구성 요소를 추가하면 기능 존재 여부가 제어되며, 토글 속성과 함께 간단한 *ngIf 사용하여 기능을 활성화/비활성화할 수 있습니다. perPage 입력은 페이지당 표시되는 레코드를 제어합니다. 페이징을 활성화하도록 그리드를 업데이트해 보겠습니다.

<igx-grid #grid [data]="data" [height]="'500px'" [width]="'100%'">
    <igx-paginator [perPage]="10">
    </igx-paginator>
</igx-grid>
html

본보기:

<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>
html

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>
html

Paginator Component Demo

import { Component, OnInit, ViewChild, AfterViewInit, ChangeDetectorRef, Inject, PLATFORM_ID } from '@angular/core';
import { athletesData } from '../../data/athletesData';
import { IPaginatorResourceStrings, IgxPaginatorComponent, IgxGridComponent, IgxPaginatorContentDirective, IgxPageSizeSelectorComponent, IgxPageNavigationComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxSwitchComponent } from 'igniteui-angular';
import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive';
import { DecimalPipe, isPlatformBrowser } from '@angular/common';
import { FormsModule } from '@angular/forms';

@Component({
    selector: 'app-grid-pager-sample',
    styleUrls: ['./grid-pager-sample.component.scss'],
    templateUrl: './grid-pager-sample.component.html',
    imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxPaginatorContentDirective, IgxPageSizeSelectorComponent, IgxPageNavigationComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxSwitchComponent, FormsModule, DecimalPipe]
})
export class GridPagerSampleComponent implements OnInit, AfterViewInit {
    @ViewChild('paginator', { read: IgxPaginatorComponent, static: false })
    paginator: IgxPaginatorComponent;

    public data: any[];
    public isDropdownHidden = false;
    public isPagerHidden = false;
    public selectOptions = [5, 15, 20, 50];

    private paginatorResourceStrings: IPaginatorResourceStrings = {
        // eslint-disable-next-line @typescript-eslint/naming-convention
        igx_paginator_label: 'Records per page'
    };

    constructor(private cdr: ChangeDetectorRef, @Inject(PLATFORM_ID) private platformId: any) {}

    public ngOnInit(): void {
        this.data = athletesData;
    }

    public ngAfterViewInit(): void {
        if (isPlatformBrowser(this.platformId)) {
            requestAnimationFrame(() => {
                this.paginator.resourceStrings = this.paginatorResourceStrings;
            });
            this.cdr.detectChanges();
        }
    }
}
ts

<div class="grid__wrapper">
  <igx-grid [igxPreventDocumentScroll]="true" #grid [data]="data" height="500px"
    width="100%">
    <igx-paginator #paginator [(page)]="grid.page" [totalRecords]="grid.totalRecords" [(perPage)]="grid.perPage"
      [selectOptions]="selectOptions">
      <igx-paginator-content>
        @if (!isDropdownHidden) {
          <igx-page-size></igx-page-size>
        }
        @if (!isPagerHidden) {
          <igx-page-nav></igx-page-nav>
        }
      </igx-paginator-content>
    </igx-paginator>
    <igx-column header="Rank" headerClasses="myClass" field="Id" [sortable]="true"></igx-column>
    <igx-column field="Name" header="Athlete"></igx-column>
    <igx-column field="BeatsPerMinute" header="Beats per minute" dataType="number">
      <ng-template igxCell let-val>
        <div class="cell__inner">
          {{ val }}
        </div>
      </ng-template>
    </igx-column>
    <igx-column field="TopSpeed" header="Top Speed" dataType="number">
      <ng-template igxCell let-val>
        <div class="cell__inner">
          {{ val | number: '1.1-5' }}
        </div>
      </ng-template>
    </igx-column>
  </igx-grid>



  <div class="options-container">
    <igx-switch [(ngModel)]="isDropdownHidden">Hide Dropdown</igx-switch>
    <igx-switch [(ngModel)]="isPagerHidden">Hide Pager</igx-switch>
  </div>
</div>
html

.grid__wrapper {
    --ig-size: var(--ig-size-medium);
    margin: 0 16px;
    padding-top: 10px;
}

igx-switch {
    margin: 24px;
}

.options-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 1rem;
}
.options_container * { margin-right: 15px; }

.select-input {
    max-width: 150px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-left: 15px;
}
scss

Remote Paging

원격 페이징은 데이터 가져오기를 담당하는 서비스와 그리드 구성 및 데이터 구독을 담당하는 구성 요소를 선언하여 수행할 수 있습니다. 자세한 내용은 Grid Remote Data Operations 항목을 확인하세요.

Remote Paging with Custom Template

어떤 경우에는 자신만의 페이징 동작을 정의하고 싶을 수도 있으며 이때 igx-paginator-content 활용하고 사용자 정의 로직을 함께 추가할 수 있습니다.이 섹션에서는 이를 보여주기 위해 원격 페이징 예제를 확장하는 방법을 설명합니다.

스타일링

페이지네이터 스타일링을 시작하려면 모든 테마 기능과 구성 요소 믹스인이 있는 index 파일을 가져와야 합니다.

@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
scss

가장 간단한 접근 방식에 따라 paginator-theme 확장하고 $text-color, $background-color 및 $border-color 매개변수를 허용하는 새로운 테마를 만듭니다.

$dark-paginator: paginator-theme(
  $text-color: #d0ab23;,
  $background-color: #231c2c,
  $border-color: #d0ab23;
);
scss

여기에서 볼 수 있듯이 페이징 컨테이너의 색상만 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
);
scss

우리가 방금 한 것처럼 색상 값을 하드 코딩하는 대신, and color 함수를 사용하여 palette 색상 측면에서 더 큰 유연성을 얻을 수 있습니다. 사용 방법에 대한 자세한 지침은 항목을 참조하십시오 Palettes.

마지막 단계는 각각 해당 테마가 있는 구성 요소 믹스인을 포함하는 것입니다.

@include css-vars($dark-paginator);

.igx-grid-paginator__pager {
  @include css-vars($dark-button);
}
scss

생성된 icon-button-theme를 내부에.igx-paginator__pager 포함시켜 paginator 버튼만 스타일이 지정되도록 합니다. 그렇지 않으면 그리드의 다른 아이콘 단추도 영향을 받습니다.

구성 요소가 ViewEncapsulation을 Emulated 사용하는 경우 버튼과 같이 페이징 컨테이너 내부에 있는 구성 요소의 스타일을 지정하기 위해 이 캡슐화 using::ng-deep이 필요합니다 penetrate.

@include css-vars($dark-paginator);

:host {
  igx-paginator {
    ::ng-deep {
      @include css-vars($dark-button);
    }
  }
}
scss

Pagination Style Example

import { Component, ViewChild, OnInit} from '@angular/core';
import { IgxGridComponent, IgxPaginatorComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxIconButtonDirective, IgxIconComponent } from 'igniteui-angular';
import { athletesData } from '../../data/athletesData';
import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive';
import { DecimalPipe } from '@angular/common';

@Component({
    selector: 'app-custom-grid-paging-style-sample',
    styleUrls: ['custom-grid-paging-style.component.scss'],
    templateUrl: 'custom-grid-paging-style.component.html',
    imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxIconButtonDirective, IgxIconComponent, DecimalPipe]
})

export class CustomGridPagingStyleSampleComponent implements OnInit{
    @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent;
    public data: any[];

    public ngOnInit(): void {
        this.data = athletesData;
    }

    public removeRow(rowIndex) {
        const row = this.grid1.getRowByIndex(rowIndex);
        row.delete();
    }
}
ts

<div class="grid__wrapper">
    <igx-grid [igxPreventDocumentScroll]="true" #grid1 [data]="data" height="520px" width="100%">
        <igx-paginator [perPage]="10"></igx-paginator>
        <igx-column header="Rank" headerClasses="myClass" field="Id" [sortable]="true"></igx-column>
        <igx-column field="Name" header="Athlete"></igx-column>
        <igx-column field="BeatsPerMinute" header="Beats per minute" dataType="number">
            <ng-template igxCell let-val>
                <div class="cell__inner">
                    {{ val }}
                </div>
            </ng-template>
        </igx-column>
        <igx-column field="TopSpeed" header="Top Speed" dataType="number">
            <ng-template igxCell let-val>
                <div class="cell__inner">
                    {{ val | number: '1.1-5' }}
                </div>
            </ng-template>
        </igx-column>
        <igx-column field="CountryFlag" header="Country">
            <ng-template igxCell let-cell="cell">
                <div class="cell__inner_">
                    <span>
                        <img [src]="cell.value" class="flag" />
                    </span>
                </div>
            </ng-template>
        </igx-column>
        <igx-column [field]="'Delete Row'" [filterable]="false">
            <ng-template igxCell let-cell="cell">
                <button igxIconButton="flat" (click)="removeRow(cell.id.rowIndex)">
                    <igx-icon>delete</igx-icon>
                </button>
            </ng-template>
        </igx-column>
    </igx-grid>
</div>
html

@use "layout.scss";
@use "igniteui-angular/theming" as *;

$my-primary: #231c2c;
$my-secondary: #d0ab23;
$dark-gray: #333;
$light-gray: #999;
$inactive-color: #9b7829;

$dark-paginator: paginator-theme(
  $text-color: $my-secondary,
  $background-color: $my-primary,
  $border-color: $my-secondary
);

$dark-button: icon-button-theme(
  $foreground: $my-secondary,
  $hover-foreground: $dark-gray,
  $hover-background: $my-secondary,
  $focus-foreground: $dark-gray,
  $focus-background: $my-secondary,
  $border-color: $my-secondary,
  $focus-border-color: $my-secondary,
  $disabled-foreground: $inactive-color
);

$dark-select: select-theme(
  $toggle-button-background: $my-primary,
  $toggle-button-foreground: $inactive-color,
  $toggle-button-foreground-filled: $inactive-color,
  $toggle-button-foreground-focus: $inactive-color,
  $toggle-button-background-focus--border: $my-primary,
);

$dark-input-group: input-group-theme(
  $filled-text-color: $my-secondary,
  $idle-text-color: $my-secondary,
  $filled-text-hover-color: $my-secondary,
  $focused-text-color: $my-secondary,
  $border-color: darken($inactive-color, 10%),
  $focused-border-color: $my-secondary,
  $input-suffix-color: $my-secondary,
);

$dark-drop-down-theme: drop-down-theme(
  $background-color: $my-primary,
  $item-text-color: $my-secondary,
  $selected-item-background: $my-secondary,
  $selected-item-text-color: $dark-gray,
  $focused-item-background: $my-secondary,
  $focused-item-text-color: $dark-gray,
  $selected-focus-item-background: $my-secondary,
  $selected-focus-item-text-color: $dark-gray,
  $selected-hover-item-background: $my-secondary,
  $selected-hover-item-text-color: $dark-gray
);

@include css-vars($dark-paginator);

:host {
  ::ng-deep {
    @include css-vars($dark-drop-down-theme);  
	
    igx-paginator {
      @include css-vars($dark-button);
      @include css-vars($dark-input-group);
      @include css-vars($dark-select);
    }
  }
}
 scss

API References

Additional Resources

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.