Angular Grid ページネーション

    ページネーションは、大量のデータセットを類似したコンテンツを持つ一連のページに分割するために使用されます。Angular テーブルのページネーションにより、ユーザー エクスペリエンスとデータ操作が向上します。Grid ページネーションは、paging および perPage 入力で設定できます。他の Angular Material テーブルと同様に、Grid のページネーションはカスタム ページのテンプレートをサポートします。

    Angular ページネーションの例

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

    paging は機能が有効かどうかを制御する Boolean プロパティです。perPage プロパティはページごとに表示レコードを制御します。以下のように Grid でページングを有効にします。

    <igx-grid #grid [data]="data" [paging]="true" [perPage]="10" height="500px" width="100%" displayDensity="cosy">
    </igx-grid>
    

    Angular ページネーションのテンプレート

    ページング領域でテンプレート化がサポートされますが、初期化でテンプレート参照を Grid に渡す必要があります。以下は、ページングが入力によって制御されるテンプレートの例です。

    <ng-template #myTemplate let-grid>
        Current page: {{ grid.page }}
        <input type="number" [(ngModel)]="grid.page" />
        Total pages: {{ grid.totalPages }}
    </ng-template>
    
    <igx-grid [paging]="true" [paginationTemplate]="myTemplate">
        ...
    </igx-grid>
    

    ページングは、Grid API によって paginatepreviousPagenextPage メソッドおよび pageperPagetotalRecords 入力を使用してプログラムで実行することもできます。ここで page は現在のページを設定できます。perPage は 1 ページに表示される項目の数を設定できます。totalRecords はグリッドにあるレコードの数を設定できます。TotalRecords プロパティは、リモート データのページングがあり、リモート レコードの合計数に基づいてページの数を変更する場合に役に立ちます。ページングを使用しており、すべてのデータがグリッドに渡される場合、totalRecords プロパティの値は提供されたデータソースの長さにデフォルトで設定されることに注意してください。totalRecords が設定されている場合、データソースに基づいてデフォルトの長さよりも優先されます。

    // 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;
    
    //  Set the total number of records that are in the grid. Default value is the length of the provided data.
    this.grid.totalRecords = 30;
    

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

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

    Angular の再利用可能なページネータ コンポーネント

    8.1.0 リリースでは、新しいコンポーネント igx-paginator が導入されました。このコンポーネントは、現在のページャーを置き換え、スタンドアロン コンポーネントとしても使用できます。 igx-paginator は、ページングを詳細なカスタマイズが可能な入力および出力プロパティを公開します。

    入力 説明
    displayDensity ページネーションの表示密度を設定します。
    dropdownEnabled 有効状態をドロップダウンに設定します。
    dropdownHidden 非表示状態をドロップダウンに設定します。
    page 現在のページを設定します。
    pagerEnabled 有効状態をページャーに設定します。
    pagerHidden 非表示状態をページャーに設定します。
    perPage ページごとに表示される項目数を設定します。
    selectOptions ページごとの項目のカスタム オプションを設定します。
    totalRecords 合計レコード数を設定します。
    resourceStrings リソース文字列を設定します。デフォルトで EN リソースを使用します。
    出力 説明
    pageChange イベントは、現在のページが変更されたときに発生されます。
    perPageChange イベントは、ページごとの項目数が変更されたときに発生されます。

    使用方法

    以下の例では、igx-paginator コンポーネントは igx-grid コンポーネントとともに使用されますが、ページング機能が必要な場合は、他のコンポーネントとともに使用できます。

    <igx-grid #grid [data]="data" [paging]="true" [perPage]="10" [paginationTemplate]="pager">
    ...
    </igx-grid>
    
    <ng-template #pager>
        <igx-paginator #paginator [(page)]="grid.page" [totalRecords]="grid.totalRecords" [(perPage)]="grid.perPage"
                [dropdownHidden]="isDropdownHidden" [pagerHidden]="isPagerHidden"
                [selectOptions]="selectOptions" [displayDensity]="grid.displayDensity">
        </igx-paginator>
    </ng-template>
    

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

    リモート ページング

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

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

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

    ローカライズ

    最小限のコードで、ページング コンポーネントのすべての文字列を簡単にローカライズできます。特定のページング インスタンスをローカライズするには、入力プロパティ resourceStrings を使用します。次の手順に従います。

    手順 1 - IPaginatorResourceStrings インターフェースと changei18n 関数をインポートします:

    import { IPaginatorResourceStrings, changei18n } from "igniteui-angular";
    

    手順 2 - ページング リソース文字列を定義します:

    private paginatorResourceStrings: IPaginatorResourceStrings = {
        igx_paginator_label: "Records per page:",
        igx_paginator_first_page_button_text: "Custom first page text",
        igx_paginator_last_page_button_text: "Custom last page text",
        igx_paginator_next_page_button_text: "Custom next page text",
        igx_paginator_previous_page_button_text: "Custom previous page text",
        igx_paginator_pager_text: "out of"
    };
    

    手順 3 - app.module レベルでコンポーネントのグローバル i18n を変更するために、オブジェクトをパラメーターとして changei18n 関数に渡します。これにより、アプリケーションのすべてのページング コンポーネントのリソース文字列が変更されます:

    public ngOnInit(): void {
        changei18n(this.paginatorResourceStrings as any);
    }
    

    リソース文字列を特定のページング コンポーネントに変更するには、@ ViewChild を使用して、ページが再描画される前に呼び出されるコールバックを使用して、requestAnimationFrame メソッド内で目的の resourceStrings を設定します。新しくインスタンス化されたオブジェクトを resourceStrings プロパティに設定すると、指定されたコンポーネントのインスタンスのみがローカライズされます。

    @ViewChild("paginator", { read: IgxPaginatorComponent, static: false }) public paginator: IgxPaginatorComponent;
    ...
    
    public ngOnInit(): void {
        requestAnimationFrame(() => {
            this.paginator.resourceStrings = this.paginatorResourceStrings;
        });
    }
    

    Angular のページネーション スタイリング

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

    // custom-grid-paging-style.component.scss
    @import '~igniteui-angular/lib/core/styles/themes/index';
    

    最も簡単な方法で igx-paginator-theme を拡張し $text-color$background-color および $border-color パラメータを受け入れる新しいテーマを作成します。

    $dark-paginator: igx-paginator-theme(
        $text-color: #F4D45C,
        $background-color: #575757,
        $border-color: #292826
    );
    

    igx-paginator-theme はページング コンテナの色の制御のみですが、ポケットベル UI のボタンには影響しません。これらのボタンにスタイル設定するために、新しいボタン テーマを作成しましょう。

    $dark-button: igx-button-theme(
        $icon-color: #FFCD0F,
        $icon-hover-color: #292826,
        $icon-hover-background: #FFCD0F,
        $icon-focus-color: #292826,
        $icon-focus-background: #FFCD0F,
        $disabled-color: #16130C
    );
    

    この例では、アイコンの色と背景、ボタンの無効な色のみを変更しましたが、igx-button-theme ではボタン スタイルを制御するためのパラメータを増やすことができます。

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

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

    igx-button ミックスインを .igx-paginator__pager 内でスコープして、ページネータ ボタンのみにスタイルが設定されるようにします。そうでない場合は、グリッド内の他のボタンも影響を受けます。

    Note

    コンポーネントが Emulated ViewEncapsulation を使用している場合、::ng-deep を使用してこのカプセル化を解除する必要があります。

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

    カラーパレットの定義

    上記のように色の値をハードコーディングする代わりに、igx-palette および igx-color 関数を使用することによって色に関してより高い柔軟性を持つことができます。

    igx-palette は渡された一次色と二次色に基づいてカラーパレットを生成します。

    $yellow-color: #F9D342;
    $black-color: #292826;
    
    $dark-palette: igx-palette($primary: $black-color, $secondary: $yellow-color);
    

    igx-color を使用してパレットから簡単に色を取り出すことができます。

    $dark-paginator: igx-paginator-theme(
        $palette: $dark-palette,
        $text-color: igx-color($dark-palette, "secondary", 400),
        $background-color: igx-color($dark-palette, "primary", 200),
        $border-color:  igx-color($dark-palette, "primary", 500)
    );
    
    $dark-button: igx-button-theme(
        $palette: $dark-palette,
        $icon-color: igx-color($dark-palette, "secondary", 700),
        $icon-hover-color: igx-color($dark-palette, "primary", 500),
        $icon-hover-background: igx-color($dark-palette, "secondary", 500),
        $icon-focus-color: igx-color($dark-palette, "primary", 500),
        $icon-focus-background: igx-color($dark-palette, "secondary", 500),
        $disabled-color: igx-color($dark-palette, "primary", 700)
    );
    
    Note

    igx-color および igx-palette は、色を生成および取得するための重要な機能です。使い方の詳細についてはパレットのトピックを参照してください。

    スキーマの使用

    テーマ エンジンには スキーマを使用できる利点があり、堅牢で柔軟な構造を構築できます。スキーマはテーマを使用するための方法です。

    すべてのコンポーネントに提供されている 2 つの定義済みスキーマ (この場合は (dark-paginationdark-button スキーマ) の 1 つを拡張します。

    // Extending the dark paginator schema
    $dark-paginator-schema: extend($_dark-pagination,
            (
                text-color:(
                    igx-color: ("secondary", 400)
                ),
                background-color:(
                    igx-color: ("primary", 200)
                ),
                border-color:(
                    igx-color:( "primary", 500)
                )
            )
    );
    // Extending the dark button schema
    $dark-button-schema: extend($_dark-button,
            (
                icon-color:(
                    igx-color:("secondary", 700)
                ),
                icon-hover-color:(
                    igx-color:("primary", 500)
                ),
                icon-hover-background:(
                    igx-color:("secondary", 500)
                ),
                icon-focus-color:(
                    igx-color:("primary", 500)
                ),
                icon-focus-background:(
                    igx-color:("secondary", 500)
                ),
                disabled-color:(
                    igx-color:("primary", 700)
                )
            )
    );
    

    カスタム スキーマを適用するには、グローバル (light または dark) の 1 つを拡張する必要があります。これは基本的にカスタム スキーマでコンポーネントを指し示し、その後それぞれのコンポーネント テーマに追加する方法です。

    // Extending the global dark-schema
    $custom-dark-schema: extend($dark-schema,(
        igx-paginator: $dark-paginator-schema,
        igx-button: $dark-button-schema
    ));
    
    // Defining igx-paginator-theme with the global dark schema
    $dark-paginator: igx-paginator-theme(
      $palette: $dark-palette,
      $schema: $custom-dark-schema
    );
    
    // Defining button-theme with the global dark schema
    $dark-button: igx-button-theme(
      $palette: $dark-palette,
      $schema: $custom-dark-schema
    );
    

    テーマを上記と同じ方法で含める必要があることに注意してください。

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

    API リファレンス

    その他のリソース

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