[研究][ASP.NET]ListView客製化分頁顯示DataPager控制項(一)
2022-04-01
********************************************************************************
2022-04-06新增
[研究][ASP.NET]ListView客製化分頁顯示DataPager控制項(二)
https://shaurong.blogspot.com/2022/04/aspnetlistviewdatapager.html
********************************************************************************
環境：Visual Studio 2022 + ASP.NET + WebForm + Web Application + C#
ListView 中部份內容，DataPager可不放 ListView 中，若放 ListView 外，要加上 PagedControlID；另外可以設定多個 DataPager 指向同一個ListView，不管是在 ListView 內或外，都同時可以顯示和作用。
DataPager 預設提供兩種頁面巡覽區樣式：「下一頁/上一頁頁面巡覽區」和「數字頁面巡覽區」。
*******************************************************************************
DataPager 預設的「下一頁/上一頁頁面巡覽區」
Default.aspx 中 ListView 的部份
<LayoutTemplate>
<table runat="server">
<tr runat="server">
<td runat="server">
<table id="itemPlaceholderContainer" runat="server" border="0" style="">
<tr runat="server" style="">
<th runat="server">id</th>
<th runat="server">欄位名稱1</th>
</tr>
<tr id="itemPlaceholder" runat="server">
</tr>
</table>
</td>
</tr>
<tr runat="server">
<td runat="server" style="">
<asp:DataPager ID="DataPager1" runat="server" PagedControlID="ListView1">
<Fields>
<asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True" ShowLastPageButton="True" />
</Fields>
</asp:DataPager>
</td>
</tr>
</table>
</LayoutTemplate> |
*******************************************************************************
DataPager 預設的「數字頁面巡覽區」
Default.aspx 中 ListView 的部份
<LayoutTemplate>
<table runat="server">
<tr runat="server">
<td runat="server">
<table id="itemPlaceholderContainer" runat="server" border="0" style="">
<tr runat="server" style="">
<th runat="server">id</th>
<th runat="server">欄位名稱1</th>
</tr>
<tr id="itemPlaceholder" runat="server">
</tr>
</table>
</td>
</tr>
<tr runat="server">
<td runat="server" style="">
<asp:DataPager ID="DataPager1" runat="server" PagedControlID="ListView1">
<Fields>
<asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True" ShowNextPageButton="False" ShowPreviousPageButton="False" />
<asp:NumericPagerField />
<asp:NextPreviousPagerField ButtonType="Button" ShowLastPageButton="True" ShowNextPageButton="False" ShowPreviousPageButton="False" />
</Fields>
</asp:DataPager>
</td>
</tr>
</table>
</LayoutTemplate> |
*******************************************************************************
強化改良1：結合上面2種，再多上10頁、下10頁
<LayoutTemplate>
<table runat="server">
<tr runat="server">
<td runat="server">
<table id="itemPlaceholderContainer" runat="server" border="0" style="">
<tr runat="server" style="">
<th runat="server">id</th>
<th runat="server">欄位名稱1</th>
</tr>
<tr id="itemPlaceholder" runat="server">
</tr>
</table>
</td>
</tr>
<tr runat="server">
<td runat="server" style="">
<asp:DataPager ID="DataPager1" runat="server">
<Fields>
<asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True" ShowNextPageButton="False" ShowPreviousPageButton="True" />
<asp:NumericPagerField PreviousPageText="上10頁" ButtonCount="10" NextPageText="下10頁" />
<asp:NextPreviousPagerField ButtonType="Button" ShowLastPageButton="True" ShowNextPageButton="True" ShowPreviousPageButton="False" />
</Fields>
</asp:DataPager>
</td>
</tr>
</table>
</LayoutTemplate> |
*******************************************************************************
強化改良2：再多顯示目前第幾頁、共幾頁、共幾筆。
<LayoutTemplate>
<table runat="server">
<tr runat="server">
<td runat="server">
<table id="itemPlaceholderContainer" runat="server" border="0" style="">
<tr runat="server" style="">
<th runat="server">id</th>
<th runat="server">欄位1</th>
</tr>
<tr id="itemPlaceholder" runat="server">
</tr>
</table>
</td>
</tr>
<tr runat="server">
<td runat="server" style="">
<asp:DataPager ID="DataPager1" runat="server">
<Fields>
<asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True" ShowNextPageButton="False" ShowPreviousPageButton="True" />
<asp:NumericPagerField PreviousPageText="上10頁" ButtonCount="10" NextPageText="下10頁" />
<asp:NextPreviousPagerField ButtonType="Button" ShowLastPageButton="True" ShowNextPageButton="True" ShowPreviousPageButton="False" />
<asp:TemplatePagerField>
<PagerTemplate>
<%--<td class="info">--%>
目前在第 <b>
<%# Container.TotalRowCount > 0 ? Math.Ceiling(((double)(Container.StartRowIndex + Container.MaximumRows) / Container.MaximumRows)) : 0 %>
</b>頁，共 <b>
<%# Math.Ceiling((double)Container.TotalRowCount / Container.MaximumRows)%>
</b>頁(共 <%# Container.TotalRowCount %> 筆)
<%--</td>--%>
</PagerTemplate>
</asp:TemplatePagerField>
</Fields>
</asp:DataPager>
</td>
</tr>
</table>
</LayoutTemplate> |
(完)
相關
[研究][ASP.NET]ListView客製化分頁顯示DataPager控制項(三)
https://shaurong.blogspot.com/2022/04/aspnetlistviewdatapager_8.html
[研究][ASP.NET]ListView客製化分頁顯示DataPager控制項(二)
https://shaurong.blogspot.com/2022/04/aspnetlistviewdatapager.html
[研究][ASP.NET]ListView客製化分頁顯示DataPager控制項(一)
https://shaurong.blogspot.com/2022/04/aspnetlistviewpager.html
[研究][ASP.NET]設定 Gridview 分頁樣式為：第X頁，共X頁，第一頁 上一頁 下一頁 最後一頁 跳到第X頁 每頁顯示X筆
https://shaurong.blogspot.com/2020/04/aspnet-gridview-xx-x-x.html
沒有留言:
張貼留言