Blazor Grid ページネーションの概要

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

Blazor Grid ページネーションの例

次の例は IgbGrid のページネーションを表し、ページごとの項目のオプションの使用法とページングを有効にする方法を公開します。ユーザーは、[最後のページに移動] ボタンと [最初のページに移動] ボタンを使用して IgbGrid ページをすばやく移動することもできます。

<IgbGrid @ref=grid Width="100%" Height="500px" Data=marketData DisplayDensity="DisplayDensity.Cosy">
    <IgbPaginator PerPage="10"></IgbPaginator>
</IgbGrid>

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

グループ行は、データ行とともにページングプロセスに関係します。それらは各ページのページサイズにカウントされます。折りたたまれた行はページングプロセスに含まれません。

ページングとグループ化の統合については、グループ化のトピックで説明しています。

使用方法

以下の例では、IgbPaginator コンポーネントを IgbGrid コンポーネントと一緒に使用していますが、ページング機能が必要な場合は、他のコンポーネントと一緒に使用できます。

<IgbGrid @ref=grid Data=marketData DisplayDensity="DisplayDensity.Compact">
    <IgbPaginator Page="grid.Page" TotalRecords="grid.TotalRecords" PerPage="10" DisplayDensity="grid.DisplayDensity">
    </IgbPaginator>
</IgbGrid>

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

API リファレンス

その他のリソース

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