DataGridのページングをカスタマイズするには

 

  DataGridにカスタムページング機能を付加するサンプル(主キーが連番のとき適用)

DataGridにカスタムページング機能を付加するサンプル(主キーが連番のとき適用)

 

このサンプルは、DataGridのカスタムページング機能を利用してページングしています。ユーザインタフェースは、通常のページングと同じですが高速化しています。通常のページングでは、カレントページに表示されるレコード以外の余分なレコードがデータベースから読み込まれます。このサンプルでは、カレントページに表示するレコードのみデータベースから読み込みます。なお、このサンプルで採用している手法は、主キーが連番のときのみ適用できます。

 

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

 

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

  データベースからカレントページに表示するレコードのみ抽出する方法

  DataGridAllowCustomPagingプロパティの使い方

  DataGridVirtualItemCountプロパティの使い方

  OleDbCommandExecuteScalar()メソッドの使い方

 

サンプルの行48-70では、DataGridを定義しています。行50では、AllowPagingプロパティにTrueを設定してページング機能を使用するようにしています。行51では、AllowCustomPagingプロパティにTrueを設定してカスタムページング機能を使用するようにしています。AllowCustomPagingTrueを設定したときは、DataGridVirtualItemCountプロパティにレコード件数を設定する必要があります。カスタムページング機能を使用するときは、カレントページに表示するレコードのみデータベースから抽出することができます。行52では、PageSizeプロパティに10を設定してページ当たりの行数を10行にしています。行53では、OnPageIndexChangedイベントを登録しています。このイベントは、ページ移動ボタンをクリックしたときに発生します。

 

62-64PagerStyleでは、ページ移動ボタンの種類と表示位置を設定しています。行63では、ModeプロパティにNumericPagesを設定してページ番号でページを移動するようにしています。行64では、PositionプロパティにBottomを設定してDataGridの下端にページ移動ボタンを表示するようにしています。

 

65-69<Columns>…</Columns>では、BoundColumnで得意先テーブルの得意先IDと得意先名をバインドしています。

 

48: <asp:DataGrid id="dgrdCustomers" runat="server"
 50:   AllowPaging="True"
 51:   AllowCustomPaging="True"
 52:   PageSize="10"
 53:   OnPageIndexChanged="dgrdCustomers_PageIndexChanged"
       :::: >
 62:   <PagerStyle CssClass="dgrdPagerStyle"
 63:     Mode="NumericPages"
 64:     Position="Bottom" />
 65:   <Columns>
 66:     <asp:BoundColumn DataField="CustomerID" HeaderText="ID" />
 67:     <asp:BoundColumn DataField="CompanyName" HeaderText="
得意先名"
 68:      ItemStyle-Width="20em" />
 69:   </Columns>
 70: </asp:DataGrid>

 

Page_Load()イベントでは、ページが最初にロードされたとき得意先テーブルのレコード件数を取得してDataGridVirtualItemCountプロパティに設定しています。行8-9では、OleDbConnectonのインスタンスを生成しています。引数には、Web.configに登録されているデータベース接続情報を設定しています。行10では、OleDbCommandのインスタンスを生成しています。引数には、Selectステートメントを指定しています。SelectCount(*)関数は、レコード件数を返します。行11では、OleDbConnectionOpen()メソッドでデータベースを開いています。行12では、OleDbCommandExecuteScalar()メソッドでレコード件数を取得してVirtualItemCountに設定しています。行13では、OleDbConnectionClose()メソッドでデータベースを閉じています。

 

15では、Sub BindData()を呼び出して得意先テーブルからカレントページに表示するレコードを抽出して表示しています。

 

  6: Sub Page_Load()
  7:   If Not IsPostBack Then
  8:     Dim con As New OleDbConnection( _
  9:       ConfigurationSettings.AppSettings("conStringNw"))
 10:     Dim cmd As OleDbCommand = New OleDbCommand("Select Count(*) From Customers", con)
 11:     con.Open()
 12:     dgrdCustomers.VirtualItemCount = cmd.ExecuteScalar()
 13:     con.Close()
 14:   End If
 15:   BindData()
 16: End Sub

 

Sub BindData()の行19-21では、得意先テーブルからカレントページに表示するレコードを抽出するSQLを生成しています。SelectステートメントのWhere句には、パラメータ変数を指定しています。行26では、パラメータ変数@StartIndexに設定する得意先IDを計算しています。DataGridCurrentPageIndexPageSizeを除算するとカレントページの開始番号-1の得意先IDが取得できます。CurrentPageIndexには、0から始まるページ番号が格納されています。PageSizeには、DataGridPageSizeプロパティに設定した行数が格納されています。行27では、開始ID-1PageSizeを加算してカレントページの最終IDを計算しています。

 

28-29では、パラメータ変数にカレントページの開始ID-1と最終IDを設定しています。たとえば、カレントページが2ページ目のときは、@StartIndex, @EndIndexには以下のような値が設定されます。

 

@StartIndex = 1 * 10

@EndIndex = 10 + 10

 

31では、OleDbDataAdapterFill()メソッドで以下のようなSelectステートメントを実行して、カレントページに表示するレコードを抽出してDataSetに格納します。

 

Select CustomerID, CompanyName From Customers

  Where CustomerID > 10 And CustomerID <= 20

  Order By CustomerID Asc

 

32では、DataSetからDataViewを生成してDataGridDataSourceプロパティに設定します。行33では、DataGridDataBind()メソッドで得意先テーブルをバインドしています。

 

18: Sub BindData()
 19:   Dim strSQL As String = "Select CustomerID, CompanyName From Customers" _
 20:     & " Where CustomerID > @StartIndex And CustomerID <= @EndIndex" _
 21:     & " Order by CustomerID Asc"
 22:   Dim con As New OleDbConnection(ConfigurationSettings.AppSettings("conStringNw"))
 23:   Dim da As New OleDbDataAdapter(strSQL, con)
 24:   Dim ds As New DataSet()
 25:
 26:   Dim intStartIndex as Integer = dgrdCustomers.CurrentPageIndex * dgrdCustomers.PageSize
 27:   Dim intEndIndex as Integer = intStartIndex + dgrdCustomers.PageSize
 28:   da.SelectCommand.Parameters.Add("@StartIndex", intStartIndex)
 29:   da.SelectCommand.Parameters.Add("@EndIndex", intEndIndex)
 30:
 31:   da.Fill(ds)
 32:   dgrdCustomers.DataSource = ds.Tables(0).DefaultView
 33:   dgrdCustomers.DataBind()
 34: End Sub

 

DataGridからページ番号をクリックすると、DataGridPageIndexChangedイベントが発生します。このイベントでは、DataGridCurrentPageIndexプロパティにNewPageIndexプロパティの値を設定してSub BindData()を呼び出します。Sub BindData()では、カレントページに表示するレコードを抽出して表示します。NewPageIndexには、ページ移動行からクリックしたページ番号が格納されています。たとえば、ページ番号2をクリックすると2が格納されます。ここで使用している計算式は、データベーステーブルの主キーが連番になっているときのみ適用できます。主キーが不連続のときのカスタムページングは、後述するサンプルで解説します。

 

36: Sub dgrdCustomers_PageIndexChanged(s As Object, e As DataGridPageChangedEventArgs)
 37:   dgrdCustomers.CurrentPageIndex = e.NewPageIndex
 38:   BindData()
 39: End Sub

 

 

  DataGridにカスタムページング機能を付加するサンプル(主キーが不連続のとき適用)

DataGridにカスタムページング機能を付加するサンプル(主キーが不連続のとき適用)

 

このサンプルは、DataGridにカスタムページング機能を追加して高速化しています。データベーステーブルの主キーが連番のときのサンプルはすでに解説しました、ここでは、主キーが不連続のときのカスタムページングについて解説します。主キーが不連続のときは、ページ移動ボタンにページ番号が使用できません。ページ番号の代わりに前頁、次頁のボタンを使用します。

 

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

 

  主キーが不連続のときのカスタムページング機能を追加する方法

  データベースから前頁に表示するレコードを抽出するSQLを生成する方法

  データベースから次頁に表示するレコードを抽出するSQLを生成する方法

  DataSetからDataTableを生成する方法

  DataTableの先頭レコード/最終レコードの値を取得する方法

 

サンプルの行78-102では、DataGridを定義しています。行81では、AllowCustomPagingプロパティにTrueを設定してカスタムページング機能を使用するようにしています。カスタムページング機能を使用するときは、DataGridVirtualItemCountプロパティにレコード件数を設定する必要があります。行82では、PageSizeプロパティにページ当たりの行数10を設定しています。行83では、OnPageIndexChangedイベントを登録しています。このイベントは、ページ移動ボタンをクリックしたときに発生します。

 

92-96PagerStyleでは、ページ移動ボタンの種類と表示位置を設定しています。行93では、ModeプロパティにNextPrevを設定して前頁、次頁のボタンを使用するようにしています。行94-95では、ボタンに表示するテキストを設定します。ボタンには、「前頁、次頁」、「<, >」など任意の文字列を表示できます。行96では、PositionプロパティにBottomを指定してページ移動ボタンを下端に表示するようにしています。

 

97-101<Columns>…</Columns>では、BoundColumnで得意先テーブルの得意先IDと得意先名をバインドしています。

 

78: <asp:DataGrid id="dgrdCustomers" runat="server"

80:   AllowPaging="True"
 81:   AllowCustomPaging="True"
 82:   PageSize="10"
 83:   OnPageIndexChanged="dgrdCustomers_PageIndexChanged"
        :::: >
 92:   <PagerStyle CssClass="dgrdPagerStyle"
 93:     Mode="NextPrev"
 94:     PrevPageText="
前頁
 95:     NextPageText="
次頁
 96:     Position="Bottom" />
 97:   <Columns>
 98:     <asp:BoundColumn DataField="CustomerID" HeaderText="ID" />
 99:     <asp:BoundColumn DataField="CompanyName" HeaderText="
得意先名"
100:      ItemStyle-Width="20em" />
101:   </Columns>
102: </asp:DataGrid>

 

Page_Load()イベントの行11-12では、LableTextプロパティに格納されている開始IDと最終IDを変数に保存しています。Textプロパティには、文字型で格納されていますので、Int32Parse()メソッドで変換しています。Labelコントロールには、カレントページの開始IDと終了IDが保存されています。これらのLabelVisibleプロパティには、Falseが設定さているためにブラウザには表示されません。行14では、ページが最初にロードされたとき、Sub BindData()を呼び出しています。引数には、InitLoadを指定しています。

 

10: Sub Page_Load()
 11:   mintFirstID = Int32.Parse(lblFirstID.Text)
 12:   mintLastID = Int32.Parse(lblLastID.Text)
 13:   If Not IsPostBack Then
 14:     BindData("InitLoad")
 15:   End If
 16: End Sub

 

Sub BindData()の行39-60If…ElseIf…Else…End Ifでは、引数で指定された値(Previous, Next, InitLoad)をチェックして対応する処理を行っています。行40-45では、引数にPreviousが指定されたときのSQLを生成しています。行48-51では、引数にNextが指定されたときのSQLを生成しています。行54-59は、引数にInitLoadが指定されたときに実行されます。行54-57では、得意先テーブルのレコード件数を取得してDataGridVirtualItemCountプロパティに設定しています。行58-59では、InitLoadSQLを生成しています。

 

InitLoadSQL:

Select Top 10 CustomerID, CompanyName From Customers

  Order By CustomerID Asc

 

PreviousSQL:

Select CustomerID, CompanyName From

  (Select Top 10 CustomerID, CompanyName From Customers

   Where CustomerID < @FirstID

   Order By CustomerID Desc) As Customer1

   Order By CustomerID Asc

 

NextSQL:

Select Top 10 CustomerID, CompanyName From Customers

  Where CustomerID > @LastID

  Order By CustomerID Asc

 

61では、OleDbDataAdapterSelectCommand.CommandTextプロパティにSQLSelectステートメントを設定しています。行62では、OleDbDataAdapterFill()メソッドでSelectステートメントを実行してカレントページに表示するレコードをDataSetに格納しています。行63では、DataSetから得意先テーブルのDataTableを生成しています。行64-65では、DataTableRowsコレクションからDataTableの先頭レコードと最終レコードの得意先IDを取得して変数に保存しています。行64-65では、LabelTextプロパティに開始IDと最終IDを保存しています。ここで保存したIDは、ページがポストバックされたときにPage_Load()イベントで取得します。行67では、DataGridDataSourceプロパティに得意先テーブルのDataViewを設定しています。行68では、DataBind()メソッドで得意先テーブルをバインドしています。これで、DataGridにはカレントページの得意先が表示されます。このサンプルでは、カレントページの開始IDと終了IDLabelTextプロパティに保存していますが、ASP.NETでは、ViewStateに保存することもできます。

 

31: Sub BindData(strDirection As String)

::::
 39:   If strDirection = "Previous" Then
 40:     strSQL = "Select CustomerID, CompanyName" _
 41:       & " From" _
 42:       & " (Select top " & intPageSize.ToString() & " CustomerID, CompanyName From Customers" _
 43:       & " Where CustomerID < " & mintFirstID.ToString() _
 44:       & " Order by CustomerID Desc) As Customer1" _
 45:       & " Order by CustomerID Asc"
 47:   ElseIf strDirection = "Next" Then
 48:     strSQL = "Select top " & intPageSize.ToString() & " CustomerID, CompanyName" _
 49:       & " From Customers" _
 50:       & " Where CustomerID > " & mintLastID.ToString() _
 51:       & " Order by CustomerID Asc"
 53:   Else
 54:     Dim cmd As OleDbCommand = New OleDbCommand("Select Count(*) From Customers", con)
 55:     con.Open()
 56:     dgrdCustomers.VirtualItemCount = cmd.ExecuteScalar()
 57:     con.Close()
 58:     strSQL = "Select Top " & intPageSize.ToString() & " CustomerID, CompanyName From Customers" _
 59:       & " Order by CustomerID Asc"
 60:   End If
 61:   da.SelectCommand.CommandText = strSQL
 62:   da.Fill(ds)
 63:   Dim dt As DataTable = ds.Tables(0)
 64:   lblFirstID.Text = dt.Rows(0)(0).ToString
 65:   lblLastID.Text = dt.Rows(dt.Rows.Count - 1)(0).ToString
 66:
 67:   dgrdCustomers.DataSource = ds.Tables(0).DefaultView
 68:   dgrdCustomers.DataBind()
 69: End Sub

ASP.NET DataGridのホームへ戻る