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

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

このサンプルは、DataGridに表示されているレコードをページングすることができます。DataGridのページを移動するには、ページ番号を選択する方法と移動ボタンをクリックする方法があります。ページ番号を選択して移動するときは、DropDownListから目的のページ番号を選択します。移動ボタンには、、、、の4種類あります。ボタンをクリックすると、先頭ページを表示します。ボタンをクリックすると、前ページに移動します。ボタンをクリックすると、次ページに移動します。ボタンをクリックすると、最終ページに移動します。

先頭ページが表示されているときは、とのボタンが使用不可になります。最終ページが表示されているときは、とのボタンが使用不可になります。

DataGridから得意先を選択すると、右側のRepeaterに得意先の詳細が表示されます。

◆プログラムDataGridPaging.aspxのポイント

¶ポイント１　ページ番号とページ移動ボタンの両方を利用できるようにするには

Web Matrixのテンプレートを使用すれば、DataGridにページング機能を簡単に追加することができます。Web Matrixのテンプレートは、DataGridのページング機能を利用して実現しています。DataGridのページング機能は、ページ番号と移動ボタンのどちらかしか利用できません。DataGridのページ番号による移動では、すべてのページ番号を表示することができませんので、１回のクリックで目的のページに移動できません。移動ボタンでページを移動するときは、前ページと次ページの2種類のボタンしかサポートしていません。

このサンプルでは、ページ番号と移動ボタンの両方を同時に利用することができます。ページ番号で移動するときは、DropDownListにすべてのページ番号が表示されますので任意のページに１回のクリックで移動できます。移動ボタンでページを移動するときは、先頭ページ、前ページ、次ページ、最終ページの4種類のボタンを使用することができます。

¶ポイント２　ページ番号でページを移動するには

ページ番号を指定してページを移動するには、DataGridのCurrentPageIndexプロパティに目的のページ番号を設定してDataBind()メソッドを実行します。CurrentPageIndexに設定するページ番号は、0から開始しますので注意してください。たとえば、2ページ目に移動するときは、1を設定します。

dgrdCustomers.CurrentPageIndex = PageNumber - 1

¶ポイント３　ページ移動ボタンで先頭ページ、最終ページに移動するには

ページ移動ボタンでDataGridの先頭ページに移動するには、DataGridのCurrentPageIndexプロパティに0を設定してDataBind()メソッドを実行します。採集ページに移動するときは、CurrentPageIndexにDataGridのPageCountプロパティに格納されている総ページ数から-1した値を設定します。

dgrdCustomers.CurrentPageIndex = 0 （先頭ページに移動）

dgrdCustomers.CurrentPageIndex = dgrdCustomers.PageCount - 1 （最終ページに移動）

◆プログラムDataGridPaging.aspxの解説（HTML編）

DataGridPaging.aspxのプレゼンテーションコンテンツの部分について解説します。行171-218の<table>…</table>では、ページ移動用のWebコントロールを定義しています。行174-185のImageButtonでは、先頭ページと前ページのボタンを定義しています。行186-196では、DropDownList、Label、TextBoxを定義してページ番号を表示しています。DropDownListには、AutoPostBackプロパティにTrueを設定して、ページ番号を選択したときにWebページがポストバックされるようにしています。TextBoxのReadOnlyプロパティには、Trueを設定して読み込み専用にしています。行197-208のImageButtonでは、次ページと最終ページのボタンを定義しています。行209-215では、LabelとTextBoxで件数を表示しています。

ここで定義しているページ移動用のImageButonは、OnCommandイベントを共有しています。OnCommandイベントで、どのボタンがクリックされたか認識するために、CommandNameプロパティにfirst、prev、next、lastを設定しています。OnCommandイベントは、ImageButtonをクリックしたときに発生します。

図ページ移動用のWebコントロール

行228-267では、DataGridを定義しています。行229では、AutoGenerateColumnsプロパティにFalseを設定してカラムの自動生成機能を抑止しています。行233では、AllowPagingプロパティにTrueを設定してページング機能を有効にしています。行234では、PageSizeプロパティに10を設定して１ページに１０行表示されるようにしています。

行246-266の<Columns>…</Columns>では、TemplateColumnとBoundColumnを定義しています。TemplateColumnでは、ItemTemplateにLinkButtonを定義しています。LinkButtonは、レコードセレクターとして使用します。BoundColumnでは、得意先テーブルの得意先名と都道府県をバインドしています。

図 DataGridに得意先テーブルを表示した例

行271-308では、Repeaterを定義しています。Repeaterには、得意先の詳細を表示します。行272-307の<ItemTemplate>…</ItemTemplate>では、得意先テーブルの得意先ID、得意先名、部署役職、電話番号、ファクスをバインドして表示しています。行276-303の<fieldset>…</fieldset>では、角が丸みのあるボックスを定義しています。行278-281の<tr>…</tr>では、得意先IDをバインドしています。得意先テーブルのフィールドをバインドするには、データ連結タグ<%#....%>を使用して記述します。後続する、<tr>…</tr>では、得意先名、部署役職、電話番号、ファックスをバインドしています。

図 Repeaterに得意先の詳細を表示した例

リスト DataGridPaging.aspxのソースコード（HTML編）

155: <html>
161: <body scroll="no">
170: <form runat="server">
171: <table>
172: <tr>
173:   <td>
174:     <asp:ImageButton id="ibtnFirst" runat="server"
175:       CommandName="first"
176:       OnCommand="ibtnCustomPaging_Command"
177:       Title="First"
179:       />
180:     <asp:ImageButton id="ibtnPrev" runat="server"
181:       CommandName="prev"
182:       OnCommand="ibtnCustomPaging_Command"
183:       Title="Prev"
185:       />

186:     <asp:DropDownList id="dropPages" runat="server"
187:       AutoPostBack="True"
189:       OnSelectedIndexChanged="dropPages_SelectedIndexChanged" />
190:     <asp:Label runat="server"
191:       CssClass="pageNumber"
192:       Text="/" />
193:     <asp:TextBox id="txtPages" runat="server"
195:       Columns="3"
196:       ReadOnly="True" />

197:     <asp:ImageButton id="ibtnNext" runat="server"
198:       CommandName="next"
199:       OnCommand="ibtnCustomPaging_Command"
200:       Title="Next"
202:       />
203:     <asp:ImageButton id="ibtnLast" runat="server"
204:       CommandName="last"
205:       OnCommand="ibtnCustomPaging_Command"
206:       Title="Last"
208:       />
209:     <asp:Label id="lblRows" runat="server"
210:       Text="件数"
211:       />
212:     <asp:TextBox id="txtRows" runat="server"
214:       Columns="3"
215:       ReadOnly="True" />
216:   </td>
217: </tr>
218: </table>
228: <asp:DataGrid id="dgrdCustomers" runat="server"
229:   AutoGenerateColumns="False"
230:   OnItemCommand="dgrdCustomers_ItemCommand"
231:   OnItemDataBound="dgrdCustomers_ItemDataBound"
233:   AllowPaging="True"
234:   PageSize="10"
235:   OnPageIndexChanged="dgrdCustomers_PageIndexChanged"
240:   EnableViewState="True">
        ・・・

246:   <Columns>
247:     <asp:TemplateColumn
248:       HeaderText="<div class='dgrdHeaderBox'>1</div>">
249:       <ItemTemplate>
250:         <asp:LinkButton id="lbtnSelect" runat="server"
251:           CommandName="Select"
252:           Text="<div class='dgrdItemArrow'>4</div>"
253:           Visible="True" />
254:       </ItemTemplate>
257:     </asp:TemplateColumn>
258:     <asp:BoundColumn
259:       DataField="CompanyName"
260:       HeaderText="<div class='dgrdHeader'>得意先名</div>">
261:     </asp:BoundColumn>
262:     <asp:BoundColumn
263:       DataField="Ken"
264:       HeaderText="<div class='dgrdHeader'>都道府県</div>">
265:     </asp:BoundColumn>
266:   </Columns>
267: </asp:DataGrid>
271: <asp:Repeater id="rptCustomer" runat="server">
272:   <ItemTemplate>
273:     <table >
274:     <tr>
275:     <td style="background-color:whitesmoke">
276:       <fieldset>
277:         <table border="0" cellPadding="3" cellSpacing="8">
278:         <tr>
279:           <td class="header">ID</td>
280:           <td class="text"> <%# Container.DataItem("CustomerID") %> </td>
281:         </tr>
              ・・・

302:         </table>
303:       </fieldset>
304:     </td>
305:     </tr>
306:     </table>
307:   </ItemTemplate>
308: </asp:Repeater>
312: </form>
313: </body>
313: </html>

◆プログラムDataGridPaging.aspxの解説（コード編）

DataGridPaging.aspxは、DataGridのページング機能をカスタマイズして使い勝手を改善しています。ページ移動ボタンをクリックしたときは、ImageButtonのOnCommandイベントでDataGridのCurrentPageIndexプロパティを書き換えてページを移動します。DropDownListからページ番号を選択したときは、OnSelectedIndexChangedイベントでCurrentPageIndexにページ番号を設定して目的のページに移動します。

Sub Page_Load()イベントの処理

このイベントは、DataGridPaging.aspxがロードされたときに実行されます。このイベントでは、DataGridに得意先テーブルをバインドします。

行7-10のIf…End Ifでは、ページが最初にロードされたか調べています。ページが最初にロードされたときは、BindDataGrid()を呼び出して、DataGridに得意先テーブルをバインドします。このサンプルでは、DataGridのページング機能を使用しませんので、DataGridのPagerStyleのVisibleプロパティにFalseを設定します。この場合、DataGridにページ移動用の行(Pager)が表示されません。

6: Sub Page_Load()
7:   If Not IsPostBack Then
8:     BindDataGrid()
9:     dgrdCustomers.PagerStyle.Visible = False
10:   End If
11: End Sub

Sub dgrdCustomers_ItemDataBound()イベントの処理

このイベントは、DataGridのDataBind()メソッドが実行されたときに発生します。このイベントでは、DataGridのアイテム(DataGridItem)にクライアント側で動作するonClickイベントを登録しています。これにより、DataGridの任意のセルをクリックして行を選択できるようになります。

17: Sub dgrdCustomers_ItemDataBound(s As Object, e As DataGridItemEventArgs)
18:   Dim lit As ListItemType = e.Item.ItemType
19:
20:   If lit = ListItemType.Item OrElse _
21:     lit = ListItemType.AlternatingItem OrElse _
22:     lit = ListItemType.SelectedItem Then
23:     Dim lbtn As LinkButton = CType(e.Item.FindControl("lbtnSelect"), LinkButton)
24:     e.Item.Attributes("onClick") = GetPostBackClientHyperlink(lbtn, "")
25:     e.Item.Style("cursor") = "hand"
26:   End If
27: End Sub

Sub dgrdCustomers_ItemCommand()イベントの処理

このイベントは、DataGridから行をクリックしたときに発生します。このイベントでは、DataGridから選択した得意先の詳細をRepeaterに表示します。

行31では、DataGridのDataKeysコレクションから、選択した行の主キー(得意先ID)を取得しています。行32では、BindRepeater()を呼び出してRepeaterに得意先の詳細を表示します。BindRepeaterの引数には、得意先IDを指定します。

29: Sub dgrdCustomers_ItemCommand(s As Object, e As DataGridCommandEventArgs)
30:   If e.CommandName = "Select" Then
31:     Dim intCustomerID As Integer = dgrdCustomers.DataKeys(e.Item.ItemIndex)
32:     BindRepeater(intCustomerID)
33:   End If
34: End Sub

Sub dgrdCustomers_PageIndexChanged()イベントの処理

このイベントは、DataGridのページ移動行(Pager)からページ番号、ページ移動ボタンをクリックしたときに発生します。このイベントではDataGridに、ページ移動行から選択したページを表示します。このサンプルでは、DataGridのページ移動行(Pager)を非可視状態にしていますので、このイベントは発生しません。

dgrdCustomers.PagerStyle.Visible = False

61: Sub dgrdCustomers_PageIndexChanged(s As Object, e As DataGridPageChangedEventArgs)
62: dgrdCustomers.CurrentPageIndex = e.NewPageIndex
63: BindDataGrid()
64: End Sub

Sub ibtnCustomPaging_Command()イベントの処理

このイベントは、DataGridの上に表示されているページ移動ボタンをクリックしたときに発生します。このイベントでは、どのボタンがクリックされたか調べてボタンに対応したページを表示します。

行37では、ImageButtonのCommadNameプロパティに設定されている値を取得しています。CommandNameプロパティには、first、prev、next、lastが格納されています。

行38-51のSelect…End Selectでは、CommandNameの値に対応してDataGridのCurrentPageIndexプロパティを書き換えます。先頭ページのボタンをクリックしたときは、CurrentPageIndexに0を設定します。前ページのボタンをクリックしたときは、CurrentPageIndexを-1します。ただし、CurrentPageIndexが0のときは書き換えません。次ページのボタンをクリックしたときは、CurrentPageIndexを+1します。ただし、CurrentPageIndexが最終ページのときは書き換えません。最終ページのボタンをクリックしたときは、CurrentPageIndexに最終ページ番号を設定します。

行52では、BindDataGrid()を呼び出してCurrentPageIndexに設定されているページを表示します。

36: Sub ibtnCustomPaging_Command(s As Object, e As CommandEventArgs)
37:   Dim strDirection As String = e.CommandName
38:   Select Case strDirection
39:     Case "first"
40:       dgrdCustomers.CurrentPageIndex = 0
41:     Case "prev"
42:       If dgrdCustomers.CurrentPageIndex > 0 Then
43:         dgrdCustomers.CurrentPageIndex -= 1
44:       End If
45:     Case "next"
46:       If dgrdCustomers.CurrentPageIndex < (dgrdCustomers.PageCount - 1) Then
47:         dgrdCustomers.CurrentPageIndex += 1
48:       End If
49:     Case "last"
50:       dgrdCustomers.CurrentPageIndex = dgrdCustomers.PageCount - 1
51:   End Select
52:   BindDataGrid()
53: End Sub

Sub dropPages_SelectedIndexChanged()イベントの処理

このイベントは、DropDownListからページ番号を選択したときに発生します。このイベントでは、DropDownListから選択したページ番号をDataGridのCurrentPageIndexプロパティに設定してページを移動します。

行56では、DropDownListのSelectedItem.Textプロパティから、選択したページ番号を取得しています。行57では、取得したページ番号をCurrentPageIndexに設定しています。CurrentPageIndexのページ番号は、0から始まりますのでDropDownListから取得したページ番号を-1しています。行58では、BindDataGrid()を呼び出してCurrentPageIndexに設定されているページを表示します。

55: Sub dropPages_SelectedIndexChanged(s As Object, e As EventArgs)
56:   Dim intNewPageIndex As Integer = Int32.Parse(dropPages.SelectedItem.Text)
57:   dgrdCustomers.CurrentPageIndex = intNewPageIndex - 1
58:   BindDataGrid()
59: End Sub

Sub BindDataGrid()の処理

このサブプロシージャでは、DataGridに得意先テーブルをバインドして表示します。BindDataGridは、Page_Load、dropPages_SelectedIndexChanged、ibtnCustomPaging_Commandイベントから呼ばれます。

行67では、得意先テーブルからレコードを抽出するSQLを生成しています。行68では、CreateDataSet()関数を呼び出して得意先テーブルのDataSetを作成しています。

行69-74のWith…End Withでは、DataGridに得意先テーブルのDataViewをバインドしています。行70では、DataGridのDataSourceプロパティに得意先テーブルのDataViewを設定しています。行71では、DataKeyFieldプロパティに得意先テーブルの主キーのカラム(得意先ID)を設定しています。行72では、DataBind()メソッドでDataViewをバインドしています。行73では、SelectedIndexプロパティに-1を設定して以前に選択された行を解除しています。

行76-79のWith…End Withでは、RepeaterのDataSourceプロパティにNothingを設定して初期化しています。

行81-85のWith…End Withでは、DropDownListにページ番号(1から最終ページまで)をバインドして表示します。DropDownListのDataSourceプロパティには、CreatePageArray()関数で作成したArrayListを設定してバインドします。行84では、DropDownListのSelectedIndexプロパティにDataGridのCurrentPageIndexを設定してカレントのページが選択された状態にします。

行86では、TextBoxに総ページ数を設定します。総ページ数は、DataGridのPageCountプロパティに格納されています。行87では、TextBoxにレコード件数を設定します。レコード件数は、DataTableのRowsコレクションのCountプロパティに格納されています。

行88では、SetButtons()を呼び出してページ移動ボタンを条件付で使用可能にします。

66: Sub BindDataGrid()
67:   Dim strSQL As String = "Select * From Customers"
68:   Dim ds AS DataSet = CreateDataSet(strSQL)
69:   With dgrdCustomers
70:     .DataSource = ds.Tables(0).DefaultView()
71:     .DataKeyField = "CustomerID"
72:     .DataBind()
73:     .SelectedIndex = -1
74:   End With
75:
76:   With rptCustomer
77:     .DataSource = Nothing
78:     .DataBind()
79:   End With
80:
81:   With dropPages
82:     .DataSource = CreatePageArray()
83:     .DataBind()
84:     .SelectedIndex = dgrdCustomers.CurrentPageIndex
85:   End With
86:   txtPages.Text = dgrdCustomers.PageCount.ToString()
87:   txtRows.Text = ds.Tables(0).Rows.Count.ToString()
88:   SetButtons()
89: End Sub

Sub BindRepeater()の処理

このサブプロシージャでは、Repeaterに得意先の詳細を表示します。BindRepeaterは、DataGridの行を選択したときにOnItemCommandイベントから呼ばれます。

行116-117では、得意先テーブルから、選択したレコードを抽出するSQLを生成しています。行118-121のWith…End Withでは、RepeaterのDataSourceプロパティにCreateDataReader()関数で作成したDataReaderを設定しています。行120では、RepeaterのDataBind()メソッドでDataReaderをバインドしています。

115: Sub BindRepeater(intCustomerID As Integer)
116:   Dim strSQL As String = "Select * From Customers " & _
117:     "Where CustomerID=" & intCustomerID.ToString
118:   With rptCustomer
119:     .DataSource = CreateDataReader(strSQL)
120:     .DataBind()
121:   End With
122: End Sub

Sub SetButtons()の処理

このサブプロシージャは、ページ移動ボタンのEnabledプロパティをTrue/Falseに再設定します。SetButtonsは、BindDataGrid()から呼ばれます。

行92-99では、ImageButtonのImageUrlプロパティとEnabledプロパティを初期化しています。行102-105では先頭ページを表示するとき、先頭ページと前ページのボタンを使用不可にしています。行107-110では最終ページを表示するとき、次ページと最終ページのボタンを使用不可にしています。

91: Sub SetButtons()
92:   ibtnFirst.imageurl = "../img/first.gif"
93:   ibtnPrev.imageurl = "../img/prev.gif"
94:   ibtnNext.imageurl = "../img/next.gif"
95:   ibtnLast.imageurl = "../img/last.gif"
96:   ibtnFirst.Enabled = True
97:   ibtnPrev.Enabled = True
98:   ibtnNext.Enabled = True
99:   ibtnLast.Enabled = True
100:   With dgrdCustomers
101:     If .CurrentPageIndex = 0 Then
102:       ibtnFirst.imageurl = "../img/firstoff.gif"
103:       ibtnPrev.imageurl = "../img/prevoff.gif"
104:       ibtnFirst.Enabled = False
105:       ibtnPrev.Enabled = False
106:     ElseIf .CurrentPageIndex = .PageCount-1 Then
107:       ibtnNext.imageurl = "../img/nextoff.gif"
108:       ibtnLast.imageurl = "../img/lastoff.gif"
109:       ibtnNext.Enabled = False
110:       ibtnLast.Enabled = False
111:     End If
112:   End With
113: End Sub

Function CreatePageArray()関数の処理

この関数は、DataGridのページ番号が格納されているArrayList()を作成して返します。CreatePageArrayは、BindDataGrid()から呼ばれます。

124: Function CreatePageArray() As ArrayList
125:   Dim arrPages As New ArrayList
126:   Dim intPage As Integer
127:
128:   For intPage = 1 To dgrdCustomers.PageCount
129:     arrPages.Add(intPage)
130:   Next
131:   Return arrPages
132: End Function

Function CreateDataReader()関数の処理

この関数は、データベースからレコードを抽出してDataReaderを作成して返します。CreateDataReaderは、BindRepeater()から呼ばれます。CreateDataReaderの引数には、strSQLとstrConnectionStringを指定します。strSQLには、データベースからレコードを抽出するSELECTステートメントを指定します。strConnectionStringには、Web.Configに登録されている<add>タグのkeyを指定します。strConnectionStringを省略したときは、デフォルトとしてconStringAccNwを使用します。

<add key="conStringAccNw"

value="PROVIDER=Microsoft.Jet.OLEDB.4.0;DATA Source=C:\WebMatrix\webdb\Nwind.mdb" />

134: Function CreateDataReader(strSQL As String, _
135:   Optional strConnectionString As String = "conStringAccNw") As OleDbDataReader
136:   Dim con As New OleDbConnection( _
137:     ConfigurationSettings.AppSettings(strConnectionString))
138:   Dim cmd As New OleDbCommand(strSQL, con)
139:   con.Open()
140:   Return cmd.ExecuteReader(CommandBehavior.CloseConnection)
141: End Function

Function CreateDataSet()関数の処理

この関数は、データベースからレコードを抽出してDataSetを作成して返します。CreateDataSetは、BindDataGrid()から呼ばれます。CreateDataSetのの引数には、strSQLとstrConnectionStringを指定します。strSQLには、データベースからレコードを抽出するSELECTステートメントを指定します。strConnectionStringには、Web.Configに登録されている<add>タグのkeyを指定します。strConnectionStringを省略したときは、デフォルトとしてconStringAccNwを使用します。

<add key="conStringAccNw"

value="PROVIDER=Microsoft.Jet.OLEDB.4.0;DATA Source=C:\WebMatrix\webdb\Nwind.mdb" />

143: Function CreateDataSet(strSQL As String, _
144:   Optional strConnectionString As String = "conStringAccNw") As DataSet
145:   Dim con As New OleDbConnection( _
146:     ConfigurationSettings.AppSettings(strConnectionString))
147:   Dim da As New OleDbDataAdapter(strSQL, con)
148:   Dim ds As New DataSet()
149:   da.Fill(ds)
150:   Return ds
151: End Function

リスト DataGridPaging.aspxのソースコード（コード編）

1: <%@ Page language="vb" %>
2: <%@ Import Namespace="System.Data" %>
3: <%@ Import Namespace="System.Data.OleDb" %>
4:
5: <script language="vb" runat="server">
6: Sub Page_Load()
11: End Sub
12:
13: Sub dgrdCustomers_ItemCreated(s As Object, e As DataGridItemEventArgs)
15: End Sub
16:
17: Sub dgrdCustomers_ItemDataBound(s As Object, e As DataGridItemEventArgs)
27: End Sub
28:
29: Sub dgrdCustomers_ItemCommand(s As Object, e As DataGridCommandEventArgs)
34: End Sub
35:
36: Sub ibtnCustomPaging_Command(s As Object, e As CommandEventArgs)
53: End Sub
54:
55: Sub dropPages_SelectedIndexChanged(s As Object, e As EventArgs)
59: End Sub
60:
61: Sub dgrdCustomers_PageIndexChanged(s As Object, e As DataGridPageChangedEventArgs)
64: End Sub
65:
66: Sub BindDataGrid()
89: End Sub
90:
91: Sub SetButtons()
113: End Sub

114:
115: Sub BindRepeater(intCustomerID As Integer)
122: End Sub
123:
124: Function CreatePageArray() As ArrayList
132: End Function
133:
134: Function CreateDataReader(strSQL As String, _
135: Optional strConnectionString As String = "conStringAccNw") As OleDbDataReader
141: End Function
142:
143: Function CreateDataSet(strSQL As String, _
144: Optional strConnectionString As String = "conStringAccNw") As DataSet
151: End Function
153: </script>