ASP.NET 徹底活用術のホームへ戻る

DataGridにページング機能を組み込む~dg2.aspx

 

DataGridにページング機能を追加するには、デザイナからDataGridを右クリックして[プロパティビルダ]を選択します。「プロパティビルダ」のダイアログが表示されたら、左側から[ページング]を選択して「ページングを許可」をクリックしてチェックマークを付けます。「ページサイズ」には既定値の「10」行が表示されていますので、必要ならば変更します。「位置」のドロップダウンリストからは、移動ボタンを表示する位置を[][][上下]から選択します。「モード」からは、[次へ、戻るボタン]または[ページ番号]のいずれかを選択します。

 

「モード」から[次へ、戻るボタン]を選択したときは、「[次のページ]ボタンのテキスト」と「[前のページ]ボタンのテキスト」にボタンに表示する標題を入力することができます。既定値は、「<」と「>」になっています。

 

「モード」から[ページ番号]を選択したときは、「数字ボタン」にページ番号の個数を入力します。既定値は、「10」になっていますので、10個のページ番号が表示されます。ページ番号が10個以上のときは、「・・・」のようなリンクが表示されます。

 

ここでは、「モード」から[ページ番号]を選択します。その他のプロパティは、既定値を使用します。「プロパティビルダ」から[OK]ボタンをクリックしてダイアログを閉じます。

 

1: DataGridのプロパティビルダからページングの各種プロパティを設定する

 

デザイナに表示されているDataGridオブジェクトにページ番号が表示されます。ページ番号のリンクをクリックしたときに目的のページに移動させるには、DataGridPageIndexChangedのイベントハンドラーを追加します。デザイナの未使用の領域をダブルクリックして、コードウィンドウを表示したら、左上の「クラス」のドロップダウンリストから[DataGrid1]を選択します。右上の「メソッド名」のドロップダウンリストから[PageIndexChanged]を選択します。Sub DataGrid1_PageIndexChangedEnd Subのイベントプロシージャが生成されたら、次のコードを追加します。

 

Private Sub DataGrid1_PageIndexChanged(ByVal source As Object, _

  ByVal e As System.Web.UI.WebControls.DataGridPageChangedEventArgs) _

  Handles DataGrid1.PageIndexChanged

  DataGrid1.CurrentPageIndex = e.NewPageIndex

  BindDataGrid()

End Sub

 

引数DataGridPageChangedEventArgsNewPageIndexプロパティには、Webページからクリックした「ページ番号」が格納されています。このページ番号をDataGridCurrentPageIndexプロパティに設定して、BindDataGridメソッドを実行します。

 

BindDataGridは、DataGridDataSourceプロパティに得意先(Customers)テーブルが格納されているDataTableオブジェクトを設定してから、DataBindメソッドを実行します。これで、DataGridに目的のページが表示されます。

 

DataTableに得意先テーブルを格納するには、CreateDataTableメソッドを実行します。CreateDataTableは、DataAdapterFillメソッドを実行して得意先テーブルのすべてのレコードを抽出してDataTableに格納して返します。

 

 

リスト1: DataGridに得意先テーブルをバインドする

Sub BindDataGrid()

  Dim strSQL As String = "Select * From Customers"

  With DataGrid1

    .DataSource = CreateDataTable(strSQL)

    .DataBind()

  End With

End Sub

 

リスト2: Nwind.mdbの得意先テーブルをDataTableに読み込んで返す

Function CreateDataTable(ByVal strSQL As String) As DataTable

  Dim strConnectionString As String = _

    String.Format("PROVIDER=Microsoft.Jet.OLEDB.4.0;DATA Source={0}", _

    Server.MapPath("~/webdb/Nwind.mdb"))

  Dim con As New OleDbConnection(strConnectionString)

  Dim da As New OleDbDataAdapter(strSQL, con)

  Dim dt As New DataTable

  da.Fill(dt)

  Return dt

End Function

 

 

2: デザイナのDataGridにページ番号が表示される

 

 

図3: ブラウザのDataGridにページ番号が表示された

 

ASP.NET 徹底活用術のホームへ戻る