DataListにページング機能を付加するには
● DataListにページング機能を付加するサンプル
図 DataListにページング機能を付加するサンプル
このサンプルは、DataListにページング機能を追加しています。DataListの再下位には、ページを移動する４個のボタンが配置されています。[<<]のボタンは先頭ページ、[>>]のボタンは最終ページに移動します。[<]のボタンは前ページ、[>]のボタンは次ページに移動します。先頭ページが表示されているとき、[<<]、[<]のボタンは自動的に無効になります。同様に、最終ページが表示されているとき、[>>]、[>]のボタンは無効になります。
このサンプルでは、以下のノウハウを習得することができます。
▲ DataListにページング機能を付加する方法
▲ HeaderTemplate, ItemTemplate, AlternatingItemTemplate, FooterTempleteの使い方
▲ Container.DataItem, DataBinder.Eval()の使い方
▲ 得意先テーブルからカレントページに表示するレコードのみ抽出する方法
▲ DataListにDataViewをバインドする方法
サンプルの行139-172では、DataListを定義しています。行141-150では、HeaderTemplateでDataListのヘッダ情報を定義しています。ヘッダには、得意先ID、得意先名、担当者名、役職、電話番号を表示します。行151-159では、ItemTemplateでDataListの奇数行に表示するアイテム情報を定義しています。アイテムには、得意先テーブルの得意先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:
EnableVie
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>には、ページ移動用の４個のボタンを定義しています。行177-181では、先頭ページに移動する<<のボタンを定義しています。行178では、Textプロパティに「<<」を設定しています。行180では、CommandNameプロパティにFirstを設定しています。行181では、OnCommandイベントを登録しています。このイベントでは、４個のボタン処理を行います。以下同様に、前ページ、次ページ、最終ページに移動するボタンを定義しています。
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では、LabelのTextプロパティに格納されているページング情報(CurrentPage, TotalPages, TotalRecords, FirstID, LastID)を取得して変数に保存しています。これらのLabelのVisibleプロパティには、Falseが設定されていますので表示されません。行21-29では、得意先テーブルのレコード件数を取得して変数に保存しています。行21では、OleDbConnectionのインスタンスを生成しています。引数には、Web.configに登録されているデータベース接続情報を指定しています。行22では、OleDbCommandのインスタンスを生成しています。引数には、得意先テーブルのレコード件数を取得するSelectステートメントとOleDbConnectionを指定しています。レコード件数は、SQLのCount()関数で取得します。行23では、OleDbConnectionのOpen()メソッドでデータベースを開いています。行24では、OleDbCommandのExecuteScalar()メソッドでレコード件数を取得しています。行25では、OleDbConnectionのClose()メソッドでデータベースを閉じています。行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では、OleDbConnectionとOleDbDataAdapterのインスタンスを生成しています。OleDbConnectionの引数には、Web.configに登録されているデータベース接続情報を指定しています。OleDbDataAdapterの引数には、OleDbConnectionを指定しています。SQLコマンドは、省略しています。
行77-104のSelect…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で作成したSQLをOleDbDataAdapterのSelectCommand.CommandTextプロパティに格納しています。行107では、OleDbDataAdapterのFill()メソッドでSQLのSelectステートメントを実行してカレントページに表示するレコードを抽出しています。行108-110では、DataSetからDataTableを生成してDataTableのRo
行112-113では、DataSetからDataViewを生成してDataListのDataSourceプロパティに設定して、DataBind()メソッドでバインドしています。これで、DataListにはカレントページのレコードが表示されます。行115では、Sub PrintStatus()を呼び出してページ番号(Page: 1/6)を表示しています。行117-121では、変数に保存しているページング情報をLabelのTextプロパティに設定しています。ここで設定したページング情報は、ページがポストバックされたときに取得して継承されます。このサンプルでは、ページング情報をLabelに保存して継承していますが、ASP.NETではVie
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.Ro
110:
mintLastID = dt.Ro
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
|
ページング情報をVie Sub DataBind()では、DataListにDataViewをバインドした後に、ページング情報をVie Vie Vie Response.Write(Vie Response.Write(Vie Vie 72: Sub DataBind(strDirection As String) :::: Sub Page_Load()イベントでは、ページがポストバックされたときにVie 14: Sub Page_Load(s As Object, e As EventArgs) 25:
Else |
Tip
|
ページ移動用のボタンをDataListのFooterTemplteに配置するには DataListのFooterTemplateにページ移動用のボタンを配置するときは、DataListにOnItemDataBoundイベントを登録します。 151: <asp:DataList
id="dlstCustomers" runat="server" OnItemDataBoundイベントでは、ItemのFindControl()メソッドでButtonを検索してEnabledプロパティを書き換えます。Enabledプロパティに設定する値は、Vie 35: Sub dlstCustomers_ItemDataBound(s As Object, e
As DataListItemEventArgs) Vie 14:
Sub Page_Load(s As Object, e As EventArgs) 20:
If Not IsPostBack() Then :::: 44:
Sub Button_Command(s As Object, e As CommandEventArgs) 67: If mintCurrentPage =
1 Then :::: |
Tip
|
ページ移動ボタンに表示する矢印を見栄えよくするには このサンプルでは、ページ移動用のボタンに<<, <, >, >>のテキスト文字を表示していすが、Webdingsのフォントを使用すると見栄えのよい矢印を表示することができます。Webdingsのフォントを使用したとき 177: <asp:Button
id="btnFirst" runat="server" |
(icon_arrowFirst.gif)
(icon_arrowPrevious.gif)
(icon_arrowNext.gif)
(icon_arrowLast.gif)