DataGridにページング機能を付加するには
● DataGridにページング機能を付加したサンプル
図 DataGridにページング機能を付加したサンプル
このサンプルは、DataGridにページング機能を追加しています。DataGridに表示されているページ番号のリンクをクリックするとそのページが表示されます。
このサンプルでは、以下のノウハウを習得することができます。
▲ DataGridにページング機能を付加する方法(AllowPaging)
▲ DataGridのページサイズを設定する方法(PageSize)
▲ DataGridのページ移動用のスタイルを設定する方法(PagerStyle)
▲ OnPageIndexChangedイベントの使い方
DataGridにページング機能を追加するには、AllowPagingプロパティにTrueを設定します。DataGridに表示される行数は、PageSizeプロパティに設定します。ページ移動用のリンクは、前頁/次頁とページ番号の２種類サポートされています。前頁/次頁のリンクでページを移動するときは、PagerStyleのModeプロパティにNextPrevを設定します。リンクに表示するテキストは、PagerStyleのPrevPageTextとNextPageTextプロパティに設定します。
PagerStyle-Mode=”NextPrev”
PagerStyle-PrevPageText=”前頁”
PagerStyle-NextPageText=”次頁”
ページ番号のリンクでページを移動するときは、ModeにNumericPagesを設定します。ページ番号の個数は、PageButtonCountプロパティに設定します。たとえば、ページ番号を1,2,3の3ページ分表示させるときは以下のように設定します。
PagerStyle-Mode=”NumericPages”
PageButtonCount=”3”
ページ移動用のリンクを表示する位置は、Positionプロパティに設定します。Positionには、Buttom, Top, TopAndButtomを設定することができます。
行41では、AllowPagingプロパティにTrueを設定してページング機能を付加しています。行42では、PageSizeプロパティに10を設定してDataGridに10行のレコードが表示されるようにしています。行43では、PagerStyleのModeプロパティにNumericPagesを設定してページの移動にページ番号を使用するようにしています。行44では、OnPageIndexChangedイベントを登録してページング処理を行っています。
行52では、PagerStyleのCssClassプロパティにCSSのクラス名を設定しています。dgrdPagerStyleは、外部ファイルstyle1.cssに登録されています。
39: <asp:DataGrid id="dgrdCustomers"
runat="server"
40:
AutoGenerateColumns="False"
41: AllowPaging="True"
42: PageSize="10"
43:
PagerStyle-Mode="NumericPages"
44:
OnPageIndexChanged="dgrdCustomers_PageIndexChanged"
::: >
:::
52: <PagerStyle CssClass="dgrdPagerStyle"
/>
53: <Columns>
:::
60: </Columns>
61:
</asp:DataGrid>
ページ移動用のリンク（ページ番号）をクリックすると、OnPageIndexChangedイベントが発生します。行14では、引数で渡されたDataGridChangedEventArgsクラスのNewPageIndexプロパティをDataGridのCurrentPageIndexプロパティに設定しています。NewPageIndexには、クリックしたページ番号が格納されています。これでDataGridを再度バインドしたときにCurrentPageIndexのページが表示されます。行15では、Sub BindData()を呼び出してDataGridをバインドしています。
12: Sub dgrdCustomers_PageIndexChanged( _
13: s As Object, e As
DataGridPageChangedEventArgs)
14: dgrdCustomers.CurrentPageIndex =
e.NewPageIndex
15: BindData()
16: End Sub
Sub BindData()では、OleDbConnection, OleDbDataAdaperクラスを使用して得意先テーブルからレコードを抽出してDataGridにバインドしています。行19-21では、StringBuilderクラスのAppend()メソッドでSQLを生成しています。行22-24では、OleDbConnectionとOleDbDataAdapterのインスタンスを生成しています。行27では、OleDbDataAdapterのFill()メソッドで得意先テーブルのレコードを抽出してDataSetに格納しています。行28-29では、DataGridのDataSourceプロパティにDataSetを設定してDataBind()メソッドでバインドしています。このとき、DataGridにはCurrentPageIndexに設定されているページが表示されます。
18: Sub BindData()
19: Dim sbSQL As New StringBuilder()
20: sbSQL.Append("Select * From
Customers ")
21: sbSQL.Append("Order by
CustomerID")
22: Dim con As New OleDbConnection( _
23:
ConfigurationSettings.AppSettings("conStringNw"))
24: Dim da As New
OleDbDataAdapter(sbSQL.ToString, con)
25: Dim ds As New DataSet
27: da.Fill(ds)
28: dgrdCustomers.DataSource = ds
29: dgrdCustomers.DataBind()
30: End Sub
Tip
|
DataGridのページングを高速化するには このサンプルでは、DataGridをページングするときに得意先テーブルのすべてのレコードを抽出して該当するページを表示しています。得意先テーブルからページに表示するレコードのみ抽出するには、DataGridのAllowCustomPagingプロパティにTrueを設定します。カスタムページング機能を使用する場合、DataGridのVirtualItemCountプロパティに得意先テーブルのレコード件数を設定する必要があります。 ページに表示するレコードのみ得意先テーブルから抽出するには、以下のようなSQLを使用します。 Select CustomerID, CompanyName From
Customers Order
by CustomerID Asc パラメータ変数@StartIndex, @EndIndexに設定する値は、次の式から計算します。 intStartIndex as
Integer = dgrdCustomers.CurrentPageIndex * dgrdCustomers.PageSize |