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

 

DataGridに複数の行(レコード)を表示するとページをスクロールする必要がありますが、スクロールする代わりにページ番号をクリックしてページを移動できるようにします。

 

DataGridのページング機能を利用してページ番号をクリックしてページを移動します。

 

DataGridからページ番号をクリックして移動する (ch55DataGrid1.aspx)

 

DataGridの右下にページ番号を表示して、ページを移動できるようにします。ここで作成するサンプルは、DataGridOracleデータベースのCustomers表をバインドして表示します。

 

Customers表から行(レコード)を抽出するには、パッケージ(CustomerPackage)に登録されているストアドプロシージャ(GetCustomers)を使用します。

 

iSQL*PlusまたはSQL*Plusを起動して、事前にパッケージ仕様部(C:\vbora\sql\CustomerPackage.sql)とパッケージ本体部(C:\vbora\sql\CustomerPackageBody.sql)を作成してください。

 

パッケージ仕様部(CustomerPackage.sql)

CREATE OR REPLACE PACKAGE CustomerPackage AS

  TYPE rcurCustomers IS REF CURSOR;

  PROCEDURE GetCustomers(

    orcurCustomers OUT rcurCustomers);

END CustomerPackage;

 

パッケージ本体部(CustomerPackageBody.sql)

CREATE OR REPLACE PACKAGE BODY CustomerPackage AS

  PROCEDURE GetCustomers(

    orcurCustomers OUT rcurCustomers) IS

  BEGIN

    OPEN orcurCustomers FOR

      SELECT * FROM Customers

      ORDER BY CustomerID;

  END GetCustomers;

END CustomerPackage;

 

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

 

DataGridにページング機能を追加する方法

DataGridのプロパティビルダからページングを許可する方法

▼プロパティビルダからページサイズ、表示位置、モードなどのプロパティを設定する方法

DataGridPageIndexChangedイベントの使い方

DataSetオブジェクトをキャッシングしてページングを高速化する方法

 

1. Webフォーム追加

 

ソリューションエクスプローラからフォルダ[ch5]を右クリックして、新規Webフォーム「ch55DataGrid1」を追加します。

 

2. DataGrid作成

 

ツールボックスの[Webフォーム]から、DataGridをドラッグ&ドロップします。デザイナにDataGrid1のオブジェクトが作成されます。

 

3. 自動フォーマット

 

DataGrid1の右クリックから[自動フォーマット]を選択します。「自動フォーマット」が表示されたら、「スキームの選択」から[プロフェッショナル1]を選択して、[OK]をクリックします。

 

4. 連結列作成

 

DataGrid1の右クリックから[プロパティビルダ]を選択します。「DataGrid1プロパティ」が表示されたら、左側から[]を選択します。

 

[実行時に自動的に列を作成する]をクリックしてチェックを外します。「使用可能な列」から[連結列]を選択してiconRightArrowをクリックします。「選択された列」に連結列が表示されたら、連結列(BoundColumn)プロパティの「ヘッダーテキスト」に「ID」、「データフィールド」に「CustomerID」を入力します。同様の手順で、得意先、担当、電話の連結列を作成します。

 

連結列(BoundColumn)のプロパティ

ヘッダーテキスト

データフィールド

ID

CustomerID

得意先

CompanyName

担当

ContactName

電話

Phone

 

 

fig5-5-1

プロパティビルダの[]から連結列作成

 

5. ページングを許可

 

「プロパティビルダ」の左側から[ページング]を選択します。[ページングを許可]をクリックしてチェックマークを付けます。「モード」から[ページ番号]を選択します。その他のプロパティは、デフォルトの状態にしておきます。

 

fig5-5-2

プロパティビルダの[ページング]からプロパティ設定

 

6. ヘッダーを中央揃え

 

「プロパティビルダ」の左側から[書式]を選択したら、画面中央の「オブジェクト」から[ヘッダー]を選択します。「水平方向の配置」から[中央]を選択してヘッダーを中央揃えに設定します。

 

fig5-5-3

プロパティビルダの[書式]からヘッダーの書式設定

 

7. ページャを右揃え

 

「プロパティビルダ」の「オブジェクト」から[ページャ]を選択します。「水平方向の配置」から[]を選択してページャを右揃えに設定します。

 

fig5-5-4

プロパティビルダの[書式]からページャの書式設定

 

8. IDの連結列を右揃え

 

「プロパティビルダ」の「オブジェクト」から[]をクリックして展開します。[Columns[0]-ID]をクリックして展開したら[項目]を選択します。「水平方向の配置」から[]を選択して、IDを右揃えに設定します。

 

fig5-5-5

プロパティビルダの[書式]からID列の項目の書式設定

 

9. コードビューに切り替え

 

メニューバーから[表示][コード]を選択してコードビューに切り替えます。クラスモジュールの先頭に、以下のImportsステートメントを追加します。

 

Imports System.Data

Imports Oracle.DataAccess.Client

Imports Oracle.DataAccess.Types

 

Page_Loadイベントに、以下のコードを追加します。

 

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs)

cccHandles MyBase.Load

  If Not IsPostBack Then

    BindGrid()

  End If

End Sub

 

クラスモジュールの最後に、Sub BindGridFunction CreateDataSetを追加します。

 

Private Sub BindGrid()

  DataGrid1.DataSource = CreateDataSet("CustomerPackage.GetCustomers")

  DataGrid1.DataBind()

End Sub

 

Private Function CreateDataSet(ByVal strPackage As String) As DataSet

  Dim con As New OracleConnection(ConfigurationSettings.AppSettings("conStringOraNw"))

  Dim cmd As New OracleCommand(strPackage, con)

  Dim da As New OracleDataAdapter

  Dim ds As New DataSet

 

  cmd.CommandType = CommandType.StoredProcedure

  cmd.Parameters.Add("1", OracleDbType.RefCursor, ParameterDirection.Output)

  da.SelectCommand = cmd

  da.Fill(ds)

  Return ds

End Function

 

コードビュー左上の「クラス名」のドロップダウンリストから[DataGrid1]を選択します。右上の「メソッド名」のドロップダウンリストから[PageIndexChanged]を選択します。DataGrid1_PageIndexChangedのイベントが作成されたら、以下のコードを追加します。

 

Private Sub DataGrid1_PageIndexChanged(ByVal source As Object,

cccByVal e As System.Web.UI.WebControls.DataGridPageChangedEventArgs)

cccHandles DataGrid1.PageIndexChanged

  DataGrid1.CurrentPageIndex = e.NewPageIndex

  BindGrid()

End Sub

 

10. ブラウザに表示

 

ソリューションエクスプローラから[ch55DataGrid1.aspx]を右クリックしてブラウザに表示します。DataGridCustomers表が表示されます。DataGrid右下のページャにページ番号のリンクが表示されますので、ページ番号をクリックするとそのページに移動します。

 

fig5-5-6

DataGrid右下のページャにページ番号のリンクが表示される

 

■解説

 

DataGridにページング機能を組み込むには、「プロパティビルダ」の[ページング]から[ページングを許可]をクリックしてチェックマークを付けます。その他のプロパティは、デフォルトの設定でも動作します。「ページサイズ」には、ページ当たりの行数を入力します。デフォルトは、「10」行に設定されています。「位置」からは、ページ移動ボタンを表示する位置を選択します。[][][上下]のいずれかを選択します。

 

「モード」からは、ページの移動をボタンで行うのか、それともページ番号で行うかを選択します。ボタンを選択したときは、ボタンに表示するテキストを入力することができます。たとえば、[前頁][次頁]のようなテキストを入力します。デフォルトは、[<][>]が表示されます。ページ番号を選択したときは、DataGridのページャに表示するページ番号の個数を指定することができます。たとえば、ページ番号を5個表示するには、「数字ボタン」に「5」を入力します。この場合、ページャには、「1, 2, 3, 4, 5,... 」のようにページ番号が5個表示されます。5ページ以降に移動するときには、[...]のリンクをクリックします。

 

「プロパティビルダ」から[OK]をクリックすると、PagerStyleが生成されます。

 

<asp:datagrid id="DataGrid1" runat="server"

  AllowPaging="True" AutoGenerateColumns="False" ・・・>

  <Columns>

    <asp:BoundColumn DataField="CustomerID" HeaderText="ID">

    ・・・

  </Columns>

  <PagerStyle HorizontalAlign="Right"

    Position="TopAndBottom"

    PageButtonCount="5"

    Mode="NumericPages">

  </PagerStyle>

</asp:datagrid>

 

DataGridのページャに表示されているページ番号のリンクをクリックすると、WebページがポストバックされてPage_LoadDataGrid1_PageIndexChangedの順にイベントが発生します。

 

Page_Loadイベントでは、IsPostBackプロパティを調べて初期ロードのときBindGridメソッドを実行します。

 

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs)

cccHandles MyBase.Load

  If Not IsPostBack Then

    BindGrid()

  End If

End Sub

 

BindGridメソッドは、CreateDataSetメソッドを実行してCustomers表のDataSetを作成します。CreateDataSetメソッドの引数には、パッケージ(CustomerPackage)のストアドプロシージャ(GetCustomers)を指定します。DataGridDataSourceプロパティにDataSetのオブジェクトを設定して、DataBindメソッドを実行すると、DataGridDataSet(DataTable)がバインドされてCustomers表が表示されます。

 

Private Sub BindGrid()

  DataGrid1.DataSource = CreateDataSet("CustomerPackage.GetCustomers")

  DataGrid1.DataBind()

End Sub

 

CreateDataSetメソッドは、OracleDataAdapterオブジェクトのFillメソッドを実行してCustomers表をDataSetに取り込みます。

 

Private Function CreateDataSet(ByVal strPackage As String) As DataSet

  Dim con As New OracleConnection(ConfigurationSettings.AppSettings("conStringOraNw"))

  Dim cmd As New OracleCommand(strPackage, con)

  Dim da As New OracleDataAdapter

  Dim ds As New DataSet

 

  cmd.CommandType = CommandType.StoredProcedure

  cmd.Parameters.Add("1", OracleDbType.RefCursor, ParameterDirection.Output)

  da.SelectCommand = cmd

  da.Fill(ds)

  Return ds

End Function

 

DataGrid1_PageIndexChangedイベントでは、DataGridPageChangedEventArgsオブジェクトのNewPageIndexプロパティからクリックしたページ番号を取得して、DataGridCurrentPageIndexプロパティに設定します。BindGridメソッドを実行すると、DataGridCurrentPageIndexに設定したページが表示されます。

 

Private Sub DataGrid1_PageIndexChanged(ByVal source As Object,

cccByVal e As System.Web.UI.WebControls.DataGridPageChangedEventArgs)

cccHandles DataGrid1.PageIndexChanged

  DataGrid1.CurrentPageIndex = e.NewPageIndex

  BindGrid()

End Sub

 

STEP UP

DataGridのページング処理を高速化するには (Ch55DataGrid2.aspx)

 

ページング処理を高速化するには、Customers表が格納されているDataSetWebサーバーのメモリ上にキャッシングします。DataSetをキャッシングするには、BindGridを以下のように書き換えます。

 

Private Sub BindGrid()

  Dim ds As DataSet = Cache("ch55DataGrid2DataSet")

 

  If ds Is Nothing Then

    ds = CreateDataSet("CustomerPackage.GetCustomers")

    Cache("ch55DataGrid2DataSet") = ds

  End If

  DataGrid1.DataSource = ds

  DataGrid1.DataBind()

End Sub