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

 

   DataListにページング機能を付加するサンプル

 

DataListにページング機能を付加するサンプル

 

このサンプルは、DataListにページング機能を追加しています。DataListの再下位には、ページを移動する4個のボタンが配置されています。[<<]のボタンは先頭ページ、[>>]のボタンは最終ページに移動します。[<]のボタンは前ページ、[>]のボタンは次ページに移動します。先頭ページが表示されているとき、[<<][<]のボタンは自動的に無効になります。同様に、最終ページが表示されているとき、[>>][>]のボタンは無効になります。

 

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

 

  DataListにページング機能を付加する方法

  HeaderTemplate, ItemTemplate, AlternatingItemTemplate, FooterTempleteの使い方

  Container.DataItem, DataBinder.Eval()の使い方

  得意先テーブルからカレントページに表示するレコードのみ抽出する方法

  DataListDataViewをバインドする方法

 

サンプルの行139-172では、DataListを定義しています。行141-150では、HeaderTemplateDataListのヘッダ情報を定義しています。ヘッダには、得意先ID、得意先名、担当者名、役職、電話番号を表示します。行151-159では、ItemTemplateDataListの奇数行に表示するアイテム情報を定義しています。アイテムには、得意先テーブルの得意先ID、得意先名、担当者名、役職、電話番号を表示します。得意先テーブルのフィールドを表示するには、Container.DataItemを使用します。たとえば、得意先IDを表示するには、Container.DataItem(“CustomerID”)のように記述します。得意先IDをフォーマットするときには、DataBinderクラスのEval()メソッドを使用して表示します。たとえば、得意先IDを数値型で小数点以下の桁数を0にするには次のように記述します。

 

DataBinder.Eval(Container.DataItem, “CustomerID”,”{0:N0}”)

 

Container.DataItem, DataBinderを使用してフィールドを表示するときは、 データ連結タグ<%#...%>内に記述します。行160-168では、AlternatingItemTemplateで偶数行に表示するアイテムを定義しています。ここで表示するアイテムは、ItemTemplateで表示するアイテムと同様です。行169-171では、FooterTemplateを定義しています。

 

139: <asp:DataList id="dlstCustomers" runat="server"
140:   EnableViewState="False">
141:   <HeaderTemplate>
142:     <table border="1" width="500" cellpadding="3" cellspacing="0">
143:     <tr class="dlstHeaderStyle">
144:       <th width="5%" align="left">ID</th>
145:       <th width="35%" align="left">
得意先名</th>
146:       <th width="20%" align="left">
担当者名</th>
147:       <th width="15%" align="left">
役職</th>
148:       <th width="25%" align="left">
電話番号</th>
149:     </tr>
150:   </HeaderTemplate>
151:   <ItemTemplate>
152:     <tr class="dlstItemStyle">
153:       <td><%# DataBinder.Eval(Container.DataItem, "CustomerID") %></td>
154:       <td><%# DataBinder.Eval(Container.DataItem, "CompanyName") %></td>
155:       <td><%# DataBinder.Eval(Container.DataItem, "ContactName") %></td>
156:       <td><%# DataBinder.Eval(Container.DataItem, "ContactTitle") %></td>
157:       <td><%# DataBinder.Eval(Container.DataItem, "Phone") %></td>
158:     </tr>
159:   </ItemTemplate>
160:   <AlternatingItemTemplate>
161:     <tr class="dlstAlternatingItemStyle">
         :::

167:     </tr>
168:   </AlternatingItemTemplate>
169:   <FooterTemplate>             
170:     </table>
171:   </FooterTemplate>
172: </asp:DataList>

 

174-208<table>…</table>には、ページ移動用の4個のボタンを定義しています。行177-181では、先頭ページに移動する<<のボタンを定義しています。行178では、Textプロパティに「<<」を設定しています。行180では、CommandNameプロパティにFirstを設定しています。行181では、OnCommandイベントを登録しています。このイベントでは、4個のボタン処理を行います。以下同様に、前ページ、次ページ、最終ページに移動するボタンを定義しています。

 

174: <table border="0" width="500" cellpadding="0" cellspacing="0">
175: <tr class="dlstPagerStyle">
176:   <td width="4%">
177:     <asp:Button id="btnFirst" runat="server"
178:       Text="<<"
179:       Width="2em"
180:       CommandName="First"
181:       OnCommand="Button_Command" />
182:   </td>

::::
207: </tr>
208: </table>

 

Page_Load()イベントでは、ページング情報と得意先テーブルの情報を取得して変数に保存しています。行15-19では、LabelTextプロパティに格納されているページング情報(CurrentPage, TotalPages, TotalRecords, FirstID, LastID)を取得して変数に保存しています。これらのLabelVisibleプロパティには、Falseが設定されていますので表示されません。行21-29では、得意先テーブルのレコード件数を取得して変数に保存しています。行21では、OleDbConnectionのインスタンスを生成しています。引数には、Web.configに登録されているデータベース接続情報を指定しています。行22では、OleDbCommandのインスタンスを生成しています。引数には、得意先テーブルのレコード件数を取得するSelectステートメントとOleDbConnectionを指定しています。レコード件数は、SQLCount()関数で取得します。行23では、OleDbConnectionOpen()メソッドでデータベースを開いています。行24では、OleDbCommandExecuteScalar()メソッドでレコード件数を取得しています。行25では、OleDbConnectionClose()メソッドでデータベースを閉じています。行26では、レコード件数とページサイズから総ページ数を計算して変数に保存しています。行27-28では、先頭ページ/前ページのボタンのEnabledプロパティをFalseに設定して無効としています。行29では、Sub DataBind()を呼び出して得意先テーブルをDataListにバインドしています。引数には、Firstを指定して先頭ページを表示するようにしています。

 

14: Sub Page_Load(s As Object, e As EventArgs)
 15:   mintCurrentPage = Int32.Parse(lblCurrentPage.Text)
 16:   mintTotalPages = Int32.Parse(lblTotalPages.Text)
 17:   mintTotalRecords = Int32.Parse(lblTotalRecords.Text)
 18:   mintFirstID = Int32.Parse(lblFirstID.Text)
 19:   mintLastID = Int32.Parse(lblLastID.Text)
 20:   If Not IsPostBack() Then
 21:     Dim con As New OleDbConnection(ConfigurationSettings.AppSettings("conStringNw"))
 22:     Dim cmd As New OleDbCommand("Select Count(*) From Customers", con)
 23:     con.Open()
 24:     mintTotalRecords = cmd.ExecuteScalar()
 25:     con.Close()
 26:     mintTotalPages = Math.Ceiling(mintTotalRecords / mintPageSize)
 27:     btnFirst.Enabled=False
 28:     btnPrevious.Enabled=False
 29:     DataBind("First")
 30:   End If
 31: End Sub

 

Sub DataBind()では、得意先テーブルからカレントページに表示するレコードを抽出してDataListに表示します。行73-74では、OleDbConnectionOleDbDataAdapterのインスタンスを生成しています。OleDbConnectionの引数には、Web.configに登録されているデータベース接続情報を指定しています。OleDbDataAdapterの引数には、OleDbConnectionを指定しています。SQLコマンドは、省略しています。

 

77-104Select…End Selectでは、strDirectionに格納されている引数を調べてカレントページに表示するレコードを抽出するSQLを作成します。引数には、First, Previous, Next, Lastが指定されます。引数の内容によって、以下のSQLが作成されます。

 

First:

Select Top n * From Customers

 

Previous:

Select * From

(Select Top n * From Customers Where CustomerID < @FirstID Order by CustomerID Desc)

As Customer1

Order by CustomerID Asc

 

Next:

Select Top n * From Customers

Where CustomerID > @LastID

Order by CustomerID Asc

 

Last:

Select * From

(Select Top n * From Customers Order by CustomerID Desc) As Customers

Order by CustomerID Asc

 

106では、Select…End Selectで作成したSQLOleDbDataAdapterSelectCommand.CommandTextプロパティに格納しています。行107では、OleDbDataAdapterFill()メソッドでSQLSelectステートメントを実行してカレントページに表示するレコードを抽出しています。行108-110では、DataSetからDataTableを生成してDataTableRowsコレクションから先頭レコードの得意先IDと最終レコードの得意先IDを取得して変数に保存しています。dt.Rows(0)(0)では、DataTableの先頭レコードの得意先IDを取得しています。dt.Rows(dt.Rows.Count-1)(0)では、DataTableの最終レコードの得意先IDを取得しています。

 

112-113では、DataSetからDataViewを生成してDataListDataSourceプロパティに設定して、DataBind()メソッドでバインドしています。これで、DataListにはカレントページのレコードが表示されます。行115では、Sub PrintStatus()を呼び出してページ番号(Page: 1/6)を表示しています。行117-121では、変数に保存しているページング情報をLabelTextプロパティに設定しています。ここで設定したページング情報は、ページがポストバックされたときに取得して継承されます。このサンプルでは、ページング情報をLabelに保存して継承していますが、ASP.NETではViewState()に保存することもできます。ViewState()を利用する方法については、後述するTipを参照してください。

 

71: Sub DataBind(strDirection As String)
 72:   Dim strSQL As String
 73:   Dim con As New OleDbConnection(ConfigurationSettings.AppSettings("conStringNw"))
 74:   Dim da As New OleDbDataAdapter("", con)
 75:   Dim ds As New DataSet()
 76:  
 77:   Select strDirection
        ::::
104:   End Select
106:   da.SelectCommand.CommandText = strSQL
107:   da.Fill(ds)
108:   Dim dt As DataTable = ds.Tables(0)
109:   mintFirstID = dt.Rows(0)(0)
110:   mintLastID = dt.Rows(dt.Rows.Count -1)(0)
112:   dlstCustomers.DataSource = ds.Tables(0).DefaultView
113:   dlstCustomers.DataBind()
115:   PrintStatus()
117:   lblCurrentPage.Text = mintCurrentPage.ToString
118:   lblTotalPages.Text = mintTotalPages.ToString
119:   lblTotalRecords.Text = mintTotalRecords.ToString
120:   lblFirstID.Text = mintFirstID.ToString
121:   lblLastID.Text = mintLastID.ToString
122: End Sub

 

Tip

ページング情報をViewState()に保存するには

 

Sub DataBind()では、DataListDataViewをバインドした後に、ページング情報をViewState()に保存しています。ViewState()に保存するには、ViewState(“Name”) = “Value”のように記述します。

 

ViewState(“Name”) = “Name”

ViewState(“name”) = “name”

Response.Write(ViewState(“Name”)) èName

Response.Write(ViewState(“name”))èname

 

ViewState()は、大文字/小文字を別々に認識しますので注意してください。

 

72: Sub DataBind(strDirection As String)

::::
113:   dlstCustomers.DataSource = ds.Tables(0).DefaultView
114:   dlstCustomers.DataBind()
116:   PrintStatus()
118:   ViewState("CurrentPage") = mintCurrentPage
119:   ViewState("TotalPages") = mintTotalPages
120:   ViewState("TotalRecords") = mintTotalRecords
121:   ViewState("FirstID") = mintFirstID
122:   ViewState("LastID") = mintLastID
123: End Sub

 

Sub Page_Load()イベントでは、ページがポストバックされたときにViewState()からページング情報を取得しています。

 

14: Sub Page_Load(s As Object, e As EventArgs)
 15:   If Not IsPostBack() Then
         ::::

25:   Else
 26:     mintCurrentPage = ViewState("CurrentPage")
 27:     mintTotalPages = ViewState("TotalPages")
 28:     mintTotalRecords = ViewState("TotalRecords")
 29:     mintFirstID = ViewState("FirstID")
 30:     mintLastID = ViewState("LastID")
 31:   End If
 32: End Sub

 

 

Tip

ページ移動用のボタンをDataListFooterTemplteに配置するには

 

DataListFooterTemplateにページ移動用のボタンを配置するときは、DataListOnItemDataBoundイベントを登録します。

 

151: <asp:DataList id="dlstCustomers" runat="server"
152:   OnItemDataBound="dlstCustomers_ItemDataBound"
        :::: >
184:   <FooterTemplate>             
185:     <tr class="dlstPagerStyle">
186:       <td colspan="5">
187:          <asp:Button id="btnFirst" runat="server"
188:            Text="<<" Width="2em" CommandName="First" OnCommand="Button_Command" />
189:          <asp:Button id="btnPrevious" runat="server"
190:            Text="<" Width="2em" CommandName="Previous" OnCommand="Button_Command" />
191:          <asp:Button id="btnNext" runat="server"
192:            Text=">" Width="2em" CommandName="Next" OnCommand="Button_Command" />
193:          <asp:Button id="btnLast" runat="server"
194:            Text=">>" Width="2em" CommandName="Last" OnCommand="Button_Command" />                  
195:       </td>
196:     </tr>
197:     </table>
198:   </FooterTemplate>
199: </asp:DataList>

 

OnItemDataBoundイベントでは、ItemFindControl()メソッドでButtonを検索してEnabledプロパティを書き換えます。Enabledプロパティに設定する値は、ViewState()に保存しておきます。

 

35: Sub dlstCustomers_ItemDataBound(s As Object, e As DataListItemEventArgs)
 36:   If e.Item.ItemType = ListItemType.Footer Then
 37:     CType(e.Item.FindControl("btnFirst"), Button).Enabled = ViewState("First")
 38:     CType(e.Item.FindControl("btnPrevious"), Button).Enabled = ViewState("Previous")
 39:     CType(e.Item.FindControl("btnNext"), Button).Enabled = ViewState("Next")
 40:     CType(e.Item.FindControl("btnLast"), Button).Enabled = ViewState("Last")
 41:    End If
 42: End sub

 

ViewState()の初期化はPage_Loadイベント、ViewState()の更新はButtonOnCommandイベントで行います。

 

14: Sub Page_Load(s As Object, e As EventArgs)
::::

20:   If Not IsPostBack() Then

::::
 27:     ViewState("First") = False
 28:     ViewState("Previous") = False
 29:     ViewState("Next") = True
 30:     ViewState("Last") = True
 31:     DataBind("First")
 32:   End If
 33: End Sub

 

44: Sub Button_Command(s As Object, e As CommandEventArgs)
::::

67:     If mintCurrentPage = 1 Then
 68:       ViewState("First") = False
 69:       ViewState("Previous") = False
 70:     ElseIf mintCurrentPage >= mintTotalPages Then
 71:       ViewState("Next") = False
 72:       ViewState("Last") = False
 73:     Else
 74:       ViewState("First") = True
 75:       ViewState("Previous") = True
 76:       ViewState("Next") = True
 77:       ViewState("Last") = True
 78:     End If

::::
 81: End Sub

 

 

Tip

ページ移動ボタンに表示する矢印を見栄えよくするには

 

このサンプルでは、ページ移動用のボタンに<<, <, >, >>のテキスト文字を表示していすが、Webdingsのフォントを使用すると見栄えのよい矢印を表示することができます。Webdingsのフォントを使用したとき(icon_arrowFirst.gif)は数字の7、(icon_arrowPrevious.gif)は数字の3(icon_arrowNext.gif)は数字の4(icon_arrowLast.gif)は数字の8に対応します。

 

 

177:     <asp:Button id="btnFirst" runat="server"
178:       Text="7"
179:       Style="font-family: Webdings"
180:       Width="2em"
181:       CommandName="First"
182:       OnCommand="Button_Command" />
185:     <asp:Button id="btnPrevious" runat="server"
186:       Text="3"
187:       Style="font-family: Webdings"
188:       Width="2em"
189:       CommandName="Previous"
190:       OnCommand="Button_Command" />
193:     <asp:Button id="btnNext" runat="server"
194:       Text="4"
195:       Style="font-family: Webdings"
196:       Width="2em"
197:       CommandName="Next"
198:       OnCommand="Button_Command" />
201:     <asp:Button id="btnLast" runat="server"
202:       Text="8"
203:       Style="font-family: Webdings"
204:       Width="2em"
205:       CommandName="Last"
206:       OnCommand="Button_Command" />

 

ASP.NET DataListのホームへ戻る