2020-04-08, 2022-01-22, 2022-04-01
本篇為下面這篇的改良，客製化自訂分頁樣式增加了設定「每頁顯示X筆」功能
[研究][ASP.NET]設定 Gridview 分頁樣式為：第X頁 共X頁 第一頁 上一頁 下一頁 最後一頁 跳頁
http://shaurong.blogspot.com/2019/10/aspnet-gridview-x-x.html
Default.aspx
| <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication2.Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <form id="form1" runat="server"> <div> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:AdventureWorks2017ConnectionString %>" SelectCommand="SELECT * FROM [AdventureWorks2017].[Person].[Person]"></asp:SqlDataSource> <asp:GridView ID="GridView1" runat="server" AllowPaging="True" AllowSorting="True" DataSourceID="SqlDataSource1" AutoGenerateColumns="False" DataKeyNames="BusinessEntityID" OnPageIndexChanging="GridView1_PageIndexChanging"> <Columns> <asp:BoundField DataField="BusinessEntityID" HeaderText="BusinessEntityID" ReadOnly="True" SortExpression="BusinessEntityID" /> <asp:BoundField DataField="PersonType" HeaderText="PersonType" SortExpression="PersonType" /> <asp:CheckBoxField DataField="NameStyle" HeaderText="NameStyle" SortExpression="NameStyle" /> <asp:BoundField DataField="Title" HeaderText="Title" SortExpression="Title" /> <asp:BoundField DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName" /> </Columns> <PagerTemplate> <table> <tr> <td style="text-align: right">第 <asp:Label ID="lblPageIndex" runat="server" Text="<%#((GridView)Container.Parent.Parent).PageIndex + 1 %>" ForeColor="Blue"></asp:Label> 頁， 共 <asp:Label ID="lblPageCount" runat="server" Text="<%# ((GridView)Container.Parent.Parent).PageCount %>" ForeColor="Blue" ></asp:Label> 頁， <asp:LinkButton ID="btnFirst" runat="server" CausesValidation="False" CommandArgument="First" CommandName="Page" Text="第一頁" CssClass="btn btn-primary btn-xs"></asp:LinkButton> <asp:LinkButton ID="btnPrev" runat="server" CausesValidation="False" CommandArgument="Prev" CommandName="Page" Text="上一頁" CssClass="btn btn-primary btn-xs"></asp:LinkButton> <asp:LinkButton ID="btnNext" runat="server" CausesValidation="False" CommandArgument="Next" CommandName="Page" Text="下一頁" CssClass="btn btn-primary btn-xs"></asp:LinkButton> <asp:LinkButton ID="btnLast" runat="server" CausesValidation="False" CommandArgument="Last" CommandName="Page" Text="最後一頁" CssClass="btn btn-primary btn-xs"></asp:LinkButton> 跳到第<asp:TextBox ID="txtNewPageIndex" runat="server" Text="<%# ((GridView)Container.Parent.Parent).PageIndex + 1%>" Width="100px"></asp:TextBox>頁 每頁顯示<asp:TextBox ID="TextBox_PageSize" runat="server" Text="<%# ((GridView)Container.Parent.Parent).PageSize %>" Width="100px"></asp:TextBox>筆 <asp:LinkButton ID="btnGo" runat="server" CausesValidation="False" CommandArgument="-1" CommandName="Page" Text="GO" CssClass="btn btn-primary btn-xs"></asp:LinkButton> </td> </tr> </table> </PagerTemplate> </asp:GridView> </div> </form> </body> </html> |
其中 Bootstrap 按鈕樣式可看
https://www.w3schools.com/bootstrap/bootstrap_buttons.asp
| using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace WebApplication2 { public partial class Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e) { GridView gvw = (GridView)sender; TextBox TextBox_PageSize = (TextBox)gvw.BottomPagerRow.FindControl("TextBox_PageSize"); bool success = Int32.TryParse(TextBox_PageSize.Text, out int number); if (success) { gvw.PageSize = number; } if (e.NewPageIndex < 0) { TextBox pageNum = (TextBox)gvw.BottomPagerRow.FindControl("txtNewPageIndex"); int Pa = int.Parse(pageNum.Text); if (Pa <= 0) { gvw.PageIndex = 0; } else { gvw.PageIndex = Pa - 1; } } else { gvw.PageIndex = e.NewPageIndex; } //Bind(); } } } |
********************************************************************************
總筆數的測試1
<PagerTemplate> 和 </PagerTemplate> 之間加上總筆數 (不是該分頁的筆數)
總共 <asp:Label ID="lblTotalCount" runat="server" ForeColor="Blue"></asp:Label> 筆，
然後 GridView1_PageIndexChanging() 中 GridView gvw = (GridView)sender; 之下增加
gvw.AllowPaging = false;
Label lblTotalCount = (Label)gvw.BottomPagerRow.FindControl("lblTotalCount");
lblTotalCount.Text = gvw.Rows.Count.ToString();
gvw.AllowPaging = true;
實際測試 lblTotalCount 永遠會是空的。
********************************************************************************
總筆數的測試2
<PagerTemplate> 和 </PagerTemplate> 之間加上總筆數 (不是該分頁的筆數)
總共 <asp:Label ID="lblTotalCount" runat="server" ForeColor="Blue"></asp:Label> 筆，
然後 GridView1_PageIndexChanging() 中 GridView gvw = (GridView)sender; 之下增加
Label lblTotalCount = (Label)gvw.BottomPagerRow.FindControl("lblTotalCount");
lblTotalCount.Text = "123";
實際測試 lblTotalCount 永遠會是空的，不會顯示 123。
********************************************************************************
總筆數的測試3
protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.Pager)
{
GridView gvw = (GridView)sender;
gvw.AllowPaging = false;
Label lblTotalCount = (Label)e.Row.FindControl("lblTotalCount");
lblTotalCount.Text = gvw.Rows.Count.ToString();
gvw.AllowPaging = true;
}
}
實際測試發現 gvw.AllowPaging = true; 執行後會跳到 GridView gvw = (GridView)sender; 造成無限迴圈，畫面永遠不顯示。
********************************************************************************
實際測試，如果<PagerTemplate></PagerTemplate>不只一組，會以最下方的一組為準，無法同時使用多組。
********************************************************************************
DataPager控制項無法搭配 GridView使用，會出現錯誤
控制項 'GridView1' 未實作 IPageableItemContainer。
下面這篇可參考
GridView with DataPager in ASP.NET 4.0 - CodeProject
https://www.codeproject.com/Tips/725639/GridView-with-DataPager-in-ASP-NET-4-0
********************************************************************************
這3個無法共存，PagerSettings 若有多個，以後面設定的為準，但<PagerTemplate>若存在，PagerSettings 就無效不會顯示。
<PagerTemplate></PagerTemplate>
<PagerSettings Mode="NextPreviousFirstLast" />
<PagerSettings Mode="Numeric" />
********************************************************************************
2022-01-22
如果網頁另有「分頁顯示」、「全部顯示」按鈕。.cs要增加Code。
WebForm1.aspx
<asp:Button ID="Button_ShowAll" runat="server" Text="全部顯示" OnClick="Button_ShowAll_Click" CssClass="btn btn-primary btn-xs" /> <asp:Button ID="Button_ShowPage" runat="server" Text="分頁顯示" OnClick="Button_ShowPage_Click" CssClass="btn btn-primary btn-xs" /> |
WebForm1.aspx.cs
protected void GridView1_Sorting(object sender, GridViewSortEventArgs e)
{
//Button_Query_Click(sender, e);
}
protected void Button_ShowAll_Click(object sender, EventArgs e)
{
GridView1.AllowPaging = false;
//Button1_Query_Click(sender, e);}
protected void Button_ShowPage_Click(object sender, EventArgs e)
{
GridView1.AllowPaging = true;
//Button1_Query_Click(sender, e);} |
相關
[研究][ASP.NET]設定 Gridview 分頁樣式為：第X頁，共X頁，第一頁 上一頁 下一頁 最後一頁 跳到第X頁 每頁顯示X筆
https://shaurong.blogspot.com/2020/04/aspnet-gridview-xx-x-x.html
[研究][ASP.NET]設定 Gridview 分頁樣式為：第X頁 共X頁 第一頁 上一頁 下一頁 最後一頁 跳頁
http://shaurong.blogspot.com/2019/10/aspnet-gridview-x-x.html
沒有留言:
張貼留言