VS 2008/ASP.NET 3.5のホームへ戻る

DataPagerコントロール

 

DataPagerコントロールは、ListViewコントロールにページング機能を付加するときに使用します。DataPagerを使用するとページ番号をクリックしてページを移動したり、ページ移動ボタンをクリックしてページを移動することができます。DataPagerPagedControlIDプロパティにはListViewIDを設定します。PageSizeプロパティにはページ当たりのレコード数を設定します。FieldsコレクションにNumericPagerFieldを追加するとページ番号が表示されます。NextPreviousPageFiledと追加すると[最初][前へ][次へ][最後]などのページ移動ボタンが表示されます。

 

DataPagerIPageableItemContainerインタフェースをインプレメントしているコントロールしか利用できませんので、DataListRepeaterには適用できません。

 

<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>

 

ListViewDataPagerを適用してページ番号を表示した例

 

DataPagerFieldsコレクションにNextPreviousPagerFiledNumericPagerFieldを追加するとページ移動ボタンとページ番号を同時に表示させることも可能です。

 

<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にページ移動ボタンとページ番号を表示させた例

 

DataPagerPagerTemplateAJAX Control ToolkitSliderExtenderPopupControlExtenderコントロールを配置するとスライダーを移動してページングさせることができます。さらに、スライダーをドラッグして移動中にポップアップにカレントのレコード位置を表示させることも可能です。

 

<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>

 

図 DataPagerPagerTemplateSliderExtenderPopupControlExtenderを配置した例

 

VS 2008/ASP.NET 3.5のホームへ戻る