[研究][ASP.NET]設定 Gridview 分頁樣式(三)：第X頁，共X頁，第一頁 上一頁 下一頁 最後一頁 跳到第X頁 每頁顯示X筆 共X筆 (再改良版)
2024-04-10本篇為下面這篇的改良，客製化自訂分頁樣式增加了設定「共X筆」功能 (感覺改到有點過度複雜了)
[研究][ASP.NET]設定 Gridview 分頁樣式(二)：第X頁，共X頁，第一頁 上一頁 下一頁 最後一頁 跳到第X頁 每頁顯示X筆
https://shaurong.blogspot.com/2020/04/aspnet-gridview-xx-x-x.html
Default6.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default6.aspx.cs"
Inherits="WebApplication1.Default6" %>
<!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">
<asp:SqlDataSource ID="SqlDataSource2" runat="server"
ConnectionString="<%$ ConnectionStrings:MyDBConnectionString %>"
SelectCommand="SELECT N'全部' AS [Field1] UNION SELECT [Field1] FROM [MyTable]">
</asp:SqlDataSource>
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True"
DataSourceID="SqlDataSource2" DataTextField="Field1" DataValueField="Field1">
</asp:DropDownList>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:MyDBConnectionString %>"
SelectCommand="SELECT * FROM [MyTable] WHERE (Field1=@Field1 OR @Field1=N'全部')"
OnSelected="SqlDataSource1_Selected">
<SelectParameters>
<asp:ControlParameter ControlID="DropDownList1" Name="Field1" PropertyName="SelectedValue" />
</SelectParameters>
</asp:SqlDataSource>
<asp:GridView ID="GridView1" runat="server" AllowPaging="True"
AllowSorting="True" AutoGenerateColumns="False" DataKeyNames="SN"
DataSourceID="SqlDataSource1"
OnPageIndexChanging="GridView1_PageIndexChanging">
<Columns>
<asp:BoundField DataField="SN" HeaderText="SN" InsertVisible="False" ReadOnly="True" SortExpression="SN" />
<asp:BoundField DataField="Field1" HeaderText="Field1" SortExpression="Field1" />
<asp:BoundField DataField="Field2" HeaderText="Field2" SortExpression="Field2" />
</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:Label ID="lblTotalRowCount" runat="server" Text="<%# totalRowCount.ToString() %>" ForeColor="Blue" /> 筆
<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>
</form>
</body>
</html>
|
Default6.aspx.cs
using System;
using System.Web.UI.WebControls;
namespace WebApplication1
{
public partial class Default6 : System.Web.UI.Page
{
protected int totalRowCount = 0;
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();
}
protected void SqlDataSource1_Selected(object sender, SqlDataSourceStatusEventArgs e)
{
totalRowCount = e.AffectedRows;
}
}
}
|
其中 Bootstrap 按鈕樣式可看
https://www.w3schools.com/bootstrap/bootstrap_buttons.asp
********************************************************************************
如果網頁另有「分頁顯示」、「全部顯示」按鈕。.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:Label ID="Label1" runat="server" Text="<%# ((IEnumerable)((SqlDataSource)((GridView)Container.Parent.Parent).DataSourceObject).Select(DataSourceSelectArguments.Empty)).Cast<object>().Count() %>" ForeColor="Blue" /> 筆
或簡化如下
共 <asp:Label ID="Label1" runat="server" Text="<%# ((SqlDataSource)((GridView)Container.Parent.Parent).DataSourceObject).Select(DataSourceSelectArguments.Empty).Cast<object>().Count() %>" ForeColor="Blue" /> 筆
實際測試可用。
(完)
相關
[研究][ASP.NET]設定 Gridview 分頁樣式(三)：第X頁，共X頁，第一頁 上一頁 下一頁 最後一頁 跳到第X頁 每頁顯示X筆 共X筆
https://shaurong.blogspot.com/2024/04/aspnet-gridview-xx-x-x-x.html
[研究]ASP.NET,共用GridView1_PageIndexChanging (三)
https://shaurong.blogspot.com/2024/04/aspnetgridview1pageindexchanging_23.html
[研究]ASP.NET,共用GridView1_PageIndexChanging (二)
https://shaurong.blogspot.com/2024/04/aspnetgridview1pageindexchanging_3.html
[研究]ASP.NET,共用GridView1_PageIndexChanging (一)
https://shaurong.blogspot.com/2024/04/aspnetgridview1pageindexchanging.html
[研究][ASP.NET]設定 Gridview 分頁樣式(二)：第X頁，共X頁，第一頁 上一頁 下一頁 最後一頁 跳到第X頁 每頁顯示X筆
https://shaurong.blogspot.com/2020/04/aspnet-gridview-xx-x-x.html
http://shaurong.blogspot.com/2019/10/aspnet-gridview-x-x.html
沒有留言:
張貼留言