ページングの表示をカスタマイズする方法

サンプルコードのダウンロード (aspnettips_GridView2.msi, 304 KB)
※このサンプルをお使いいただくためには、Visual Studio 2005 が必要です。

たくさんあるデータを 1 ページずつ区切って表示することをページング処理といいます。GridView コントロールを使ってページング処理を行う方法については、データベースの内容を 1 ページずつ区切って表示する方法で紹介しました。ここでは、デフォルトの設定でページングを行いましたが、GridView コントロールのプロパティを使って、表示方法をカスタマイズすることもできます。

「データベースの内容を 1 ページずつ区切って表示する方法」で作成したサンプルをベースに、ページングの表示をカスタマイズしてみます。

今回は、次の手順でページングをカスタマイズします。

1 ページあたりの項目数
ページングのモード変更
ページ移動のリンクを画像にする

(1) 1 ページあたりの項目数

GridView コントロールのページング機能を使って 1 ページに表示する項目数は、デフォルトでは 10 です。この数は、GridView コントロールの PageSize プロパティで変更できます。図 1 は、PageSize プロパティを 5 にしてみた場合の表示結果です。

　

　図 1 PageSize プロパティを 5 に変更した場合

(2) ページングのモード変更

GridView コントロールのデフォルトのページング機能では、ページ番号を 1 から 10 まで表示します。このページ移動のための表示内容は、PagerSettings の Mode プロパティの値を次のように変更してカスタマイズできます。

Modeプロパティの値	意味
NextPrevious	次ページと前ページへのリンクを表示
Numeric	ページ番号のリンクを表示
NextPreviousFirstLast	次ページと前ページ、最初のページ、最後のページへのリンクを表示
NumericFirstLast	ページ番号、最初のページ、最後のページへのリンクを表示

Modeプロパティの値	意味
NextPrevious
Numeric
NextPreviousFirstLast
NumericFirstLast

また、PagerSettings の Mode プロパティの場合、表示するページ番号の数を変更できます。PagerSettings の PageButtonCount プロパティを 5 にすると、図 2 のようにページ番号が 5 つだけ表示されます。

　

　図 2 PagerSettings の PageButtonCount プロパティを 5 に変更

(3) ページ移動のリンクを画像にする

次に、最初と最後のページへ移動するリンクを画像にしてみます。PagerSettings の Mode プロパティは NumericFirstLast、PageButtonCount プロパティは 5 のままにしておいてください。
最初のページへ移動するリンクを画像にするには、PagerSettings の FirstPageImageUrl プロパティに画像のパスを指定します。最後のページへのリンク画像は、PagerSettings の LastPageImageUrl プロパティです。次のように指定します（図 3）。

　

　図 3 画像のパスを指定

実行してみると、図 4 のようにリンクが画像の形式で表示されます。

　

　図 4 最初と最後のページへのリンクを画像に変更

このように、GridView コントロールの PagerSettings プロパティなどを設定することで、ページングのカスタマイズを簡単に行うことができます。