Blazor Grid ページネーションの概要
Blazor Grid の Ignite UI for Blazor ページネーション機能は、大量のデータセットを類似したコンテンツを持つ一連のページに分割するために使用されます。React グリッドのページネーションにより、ユーザー エクスペリエンスとデータ操作が向上します。IgbGrid
ページネーションは、列の追加と同様に、IgbPaginator
タグを定義することにより、グリッド ツリーに投影された別のコンポーネントを介して構成できます。他の Blazor テーブルと同様に、Blazor Grid のページネーションはカスタム ページのテンプレートをサポートしています。
Blazor Grid ページネーションの例
次の例は IgbGrid
のページネーションを表し、ページごとの項目のオプションの使用法とページングを有効にする方法を公開します。ユーザーは、[最後のページに移動] ボタンと [最初のページに移動] ボタンを使用して IgbGrid
ページをすばやく移動することもできます。
.gridSize {
--ig-size: var(--ig-size-small);
}
<IgbGrid @ref=grid Class="gridSize" Width="100%" Height="500px" Data=Data>
<IgbPaginator PerPage="10"></IgbPaginator>
</IgbGrid>
グループ化によるページング
グループ行は、データ行とともにページング プロセスに関係します。それらは各ページのページ サイズにカウントされます。折りたたまれた行はページング プロセスに含まれません。
ページングとグループ化の統合については、グループ化のトピックで説明しています。
使用方法
以下の例では、IgbPaginator
コンポーネントを IgbGrid
コンポーネントと一緒に使用していますが、ページング機能が必要な場合は、他のコンポーネントと一緒に使用できます。
<IgbGrid @ref=grid Data=Data className="gridSize">
<IgbPaginator Page="grid.Page" TotalRecords="grid.TotalRecords" PerPage="10">
</IgbPaginator>
</IgbGrid>
ページネーター コンポーネントのデモ
API リファレンス
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。