Premium

Angular Grid ページネーション

ページネーションは、大量のデータセットを類似したコンテンツを持つ一連のページに分割するために使用されます。Angular テーブルのページネーションにより、ユーザーエクスペリエンスとデータ操作が向上します。Grid ページネーションは、列の追加と同様に、igx-paginator タグを定義することにより、グリッドツリーに投影された個別のコンポーネントを介して構成できます。他の Angular テーブルと同様に、Grid のページネーションはカスタムページのテンプレートをサポートします。

Angular ページネーションの例

次の例は、Grid ページネーションを表しており、items per page のオプションの使用法と、ページングを有効にする方法を示しています。ユーザーは、[最後のページに移動] ボタンと [最初のページに移動] ボタンを使用して、Grid ページをすばやくナビゲートすることもできます。

igx-paginator コンポーネントを追加すると、機能が存在するかどうかが制御されます。トグルプロパティを持つ単純な *ngIf を使用して、機能を有効/無効にできます。perPage 入力は、ページごとに表示されるレコードを制御します。以下のように Grid でページングを有効にします。

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

グループ化によるページング

グループ行は、データ行とともにページングプロセスに関係します。それらは各ページのページサイズにカウントされます。折りたたまれた行はページングプロセスに含まれません。ページングとグループ化の統合については、グループ化のトピックで説明しています。

使用方法

以下の例では、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>

ページネーターコンポーネントのデモ

リモートページング

リモートページングは、データ取得を担当するサービスと、グリッドの構築とデータサブスクリプションを担当するコンポーネントを宣言することで実現できます。詳細については、Grid リモートデータ操作トピックをご覧ください。

カスタムテンプレートのリモートページング

独自のページング動作を定義するために、igx-paginator-content を使用してカスタムロジックを追加できます。このセクションでは、上記を実証するために、リモートページングの例を拡張する方法を説明します。

スタイル設定

ページネーターのスタイル設定は、すべてのテーマ関数とコンポーネントミックスインが存在する index ファイルをインポートする必要があります。

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

// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @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: flat-icon-button-theme(
  $foreground: #d0ab23,
  $hover-foreground: #231c2c,
  $hover-background: #d0ab23,
  $focus-foreground: #231c2c,
  $focus-background: #d0ab23,
  $disabled-foreground: #9b7829
);

上記のようにカラーの値をハードコーディングする代わりに、palette および color 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細についてはパレットのトピックをご覧ください。

最後にそれぞれのテーマを持つコンポーネントミックスインを含めることです。

:host {
    @include tokens($dark-paginator);

    .igx-grid-paginator__pager {
        @include tokens($dark-button);
    }
}

作成した icon-button-theme を .igx-paginator__pager 内に含めて、ページネーターボタンのみにスタイルを設定します。そうでない場合は、グリッド内の他のアイコンボタンも影響を受けます。

コンポーネントが Emulated ViewEncapsulation を使用している場合、ボタンのようにページングコンテナー内にあるコンポーネントのスタイルを設定するには、::ng-deep を使用してこのカプセル化を解除する必要があります。

:host {
  @include tokens($dark-paginator);

  igx-paginator {
    ::ng-deep {
      @include tokens($dark-button);
    }
  }
}

ページネーションスタイルの例

API リファレンス

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。