ASP.NET DataGridのホームへ戻る

DataGridにページング機能を付加するには

 

  DataGridにページング機能を付加したサンプル

 

DataGridにページング機能を付加したサンプル

 

このサンプルは、DataGridにページング機能を追加しています。DataGridに表示されているページ番号のリンクをクリックするとそのページが表示されます。

 

このサンプルでは、以下のノウハウを習得することができます。

 

  DataGridにページング機能を付加する方法(AllowPaging)

  DataGridのページサイズを設定する方法(PageSize)

  DataGridのページ移動用のスタイルを設定する方法(PagerStyle)

  OnPageIndexChangedイベントの使い方

 

DataGridにページング機能を追加するには、AllowPagingプロパティにTrueを設定します。DataGridに表示される行数は、PageSizeプロパティに設定します。ページ移動用のリンクは、前頁/次頁とページ番号の2種類サポートされています。前頁/次頁のリンクでページを移動するときは、PagerStyleModeプロパティにNextPrevを設定します。リンクに表示するテキストは、PagerStylePrevPageTextNextPageTextプロパティに設定します。

 

PagerStyle-Mode=”NextPrev”

PagerStyle-PrevPageText=”前頁

PagerStyle-NextPageText=”次頁

 

ページ番号のリンクでページを移動するときは、ModeNumericPagesを設定します。ページ番号の個数は、PageButtonCountプロパティに設定します。たとえば、ページ番号を1,2,33ページ分表示させるときは以下のように設定します。

 

PagerStyle-Mode=”NumericPages”

PageButtonCount=”3”

 

ページ移動用のリンクを表示する位置は、Positionプロパティに設定します。Positionには、Buttom, Top, TopAndButtomを設定することができます。

 

41では、AllowPagingプロパティにTrueを設定してページング機能を付加しています。行42では、PageSizeプロパティに10を設定してDataGrid10行のレコードが表示されるようにしています。行43では、PagerStyleModeプロパティにNumericPagesを設定してページの移動にページ番号を使用するようにしています。行44では、OnPageIndexChangedイベントを登録してページング処理を行っています。

 

52では、PagerStyleCssClassプロパティに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プロパティをDataGridCurrentPageIndexプロパティに設定しています。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では、OleDbConnectionOleDbDataAdapterのインスタンスを生成しています。行27では、OleDbDataAdapterFill()メソッドで得意先テーブルのレコードを抽出してDataSetに格納しています。行28-29では、DataGridDataSourceプロパティに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をページングするときに得意先テーブルのすべてのレコードを抽出して該当するページを表示しています。得意先テーブルからページに表示するレコードのみ抽出するには、DataGridAllowCustomPagingプロパティにTrueを設定します。カスタムページング機能を使用する場合、DataGridVirtualItemCountプロパティに得意先テーブルのレコード件数を設定する必要があります。

 

ページに表示するレコードのみ得意先テーブルから抽出するには、以下のようなSQLを使用します。

 

Select CustomerID, CompanyName From Customers
Where CustomerID > @StartIndex And CustomerID <= @EndIndex

Order by CustomerID Asc

 

パラメータ変数@StartIndex, @EndIndexに設定する値は、次の式から計算します。

 

intStartIndex as Integer = dgrdCustomers.CurrentPageIndex * dgrdCustomers.PageSize
intEndIndex as Integer = StartIndex + dgrdCustomers.PageSize

 

 

ASP.NET DataGridのホームへ戻る