◆DataPagerコントロール
DataPagerコントロールは、ListViewコントロールにページング機能を付加するときに使用します。DataPagerを使用するとページ番号をクリックしてページを移動したり、ページ移動ボタンをクリックしてページを移動することができます。DataPagerのPagedControlIDプロパティにはListViewのIDを設定します。PageSizeプロパティにはページ当たりのレコード数を設定します。FieldsコレクションにNumericPagerFieldを追加するとページ番号が表示されます。NextPreviousPageFiledと追加すると[最初]、[前へ]、[次へ]、[最後]などのページ移動ボタンが表示されます。
DataPagerはIPageableItemContainerインタフェースをインプレメントしているコントロールしか利用できませんので、DataListやRepeaterには適用できません。
<asp:ListView ID="ListView1" runat="server"
DataSourceID="SqlDataSource1">
・・・
</asp:ListView>
<asp:DataPager ID="DataPager1" runat="server"
PagedControlID="ListView1" PageSize="5">
<Fields>
<asp:NumericPagerField
ButtonCount="50" />
</Fields>
</asp:DataPager>
図 ListViewにDataPagerを適用してページ番号を表示した例
DataPagerのFieldsコレクションにNextPreviousPagerFiledとNumericPagerFieldを追加するとページ移動ボタンとページ番号を同時に表示させることも可能です。
<asp:DataPager ID="DataPager1" runat="server"
PagedControlID="ListView1" PageSize="5">
<Fields>
<asp:NextPreviousPagerField
ButtonType="Button"
ShowFirstPageButton="true" ShowPreviousPageButton="true"
ShowNextPageButton="false" ShowLastPageButton="false" />
<asp:NumericPagerField
ButtonCount="10" />
<asp:NextPreviousPagerField
ButtonType="Button"
ShowFirstPageButton="false" ShowPreviousPageButton="false"
ShowNextPageButton="true" ShowLastPageButton="true" />
</Fields>
</asp:DataPager>
図 ListViewにページ移動ボタンとページ番号を表示させた例
DataPagerのPagerTemplateにAJAX Control ToolkitのSliderExtender、PopupControlExtenderコントロールを配置するとスライダーを移動してページングさせることができます。さらに、スライダーをドラッグして移動中にポップアップにカレントのレコード位置を表示させることも可能です。
<asp:DataPager ID="pager" runat="server" PageSize="10">
<Fields>
<asp:TemplatePagerField OnPagerCommand="PagerCommand">
<PagerTemplate>
<asp:ImageButton ID="btnFirst" runat="server" />
<asp:ImageButton ID="btnPrevious" runat="server" />
<asp:TextBox ID="txtSlider" runat="server"
AutoPostBack="true" OnTextChanged="CurrentPageChanged" />
<ajaxToolkit:SliderExtender ID="slider" runat="server"
BehaviorID="slider"
TargetControlID="txtSlider"
Orientation="Horizontal"
Minimum="1" Maximum='<%# ... %>' />
<asp:Panel ID="preview" runat="server"
CssClass="preview" style="display:none">
</asp:Panel>
<ajaxToolkit:PopupControlExtender ID="previewPopup"
BehaviorID="previewPopup" runat="server"
TargetControlID="preview" PopupControlID="preview"
OffsetY="-85" OffsetX="-50" />
<asp:ImageButton ID="btnNext" runat="server" />
<asp:ImageButton ID="btnLast" runat="server" />
</PagerTemplate>
</asp:TemplatePagerField>
</Fields>
</asp:DataPager>
図 DataPagerのPagerTemplateにSliderExtenderとPopupControlExtenderを配置した例