溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
GridView 分頁顯示與數據加載是 Web 應用程序中常見的功能，可以幫助用戶更好地瀏覽和管理大量數據。以下是一個簡單的示例，展示了如何使用 GridView 實現分頁顯示和數據加載。
首先，確保你的項目中已經引入了相關庫，例如：
<!DOCTYPE html>
<html>
<head>
<title>GridView 分頁示例</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
接下來，創建一個簡單的 GridView 結構：
<div class="container">
<h2>GridView 分頁示例</h2>
<div class="row">
<div class="col-md-6 offset-md-3">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnPageIndexChanging="GridView1_PageIndexChanging" ShowHeader="false" OnRowCreated="GridView1_RowCreated">
<Columns>
<asp:BoundField DataField="ID" HeaderText="ID" />
<asp:BoundField DataField="Name" HeaderText="名稱" />
</Columns>
</asp:GridView>
<div class="pagination">
<asp:Label ID="lblPageInfo" runat="server" Text="" CssClass="pagination-info"></asp:Label>
<asp:Button ID="btnPrevious" runat="server" Text="上一頁" OnClick="btnPrevious_Click" CssClass="page-link" />
<asp:Button ID="btnNext" runat="server" Text="下一頁" OnClick="btnNext_Click" CssClass="page-link" />
</div>
</div>
</div>
</div>
在代碼后臺（例如：Default.aspx.cs）中，添加以下代碼以實現分頁功能：
using System;
using System.Data;
using System.Data.SqlClient;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class Default : System.Web.UI.Page
{
private const string ConnectionString = "your_connection_string";
private const int PageSize = 10;
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindGridView();
}
}
private void BindGridView()
{
using (SqlConnection connection = new SqlConnection(ConnectionString))
{
connection.Open();
int pageIndex = Convert.ToInt32(Request.QueryString["page"]) ?? 1;
int totalRecords = GetTotalRecords();
int totalPages = (int)Math.Ceiling((double)totalRecords / PageSize);
if (pageIndex > totalPages)
{
pageIndex = totalPages;
}
int startIndex = (pageIndex - 1) * PageSize;
string query = $"SELECT * FROM YourTable ORDER BY ID OFFSET {startIndex} ROWS FETCH NEXT {PageSize} ROWS ONLY";
using (SqlDataAdapter adapter = new SqlDataAdapter(query, connection))
{
DataTable dataTable = new DataTable();
adapter.Fill(dataTable);
GridView1.DataSource = dataTable;
GridView1.DataBind();
}
lblPageInfo.Text = $"第 {pageIndex} 頁，共 {totalPages} 頁";
}
}
private int GetTotalRecords()
{
using (SqlConnection connection = new SqlConnection(ConnectionString))
{
connection.Open();
string query = "SELECT COUNT(*) FROM YourTable";
using (SqlCommand command = new SqlCommand(query, connection))
{
int totalRecords = (int)command.ExecuteScalar();
return totalRecords;
}
}
}
protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
GridView1.PageIndex = e.NewPageIndex;
BindGridView();
}
protected void btnPrevious_Click(object sender, EventArgs e)
{
GridView1.PageIndex = GridView1.PageIndex - 1;
BindGridView();
}
protected void btnNext_Click(object sender, EventArgs e)
{
GridView1.PageIndex = GridView1.PageIndex + 1;
BindGridView();
}
}
請注意，你需要將上述代碼中的 your_connection_string 替換為你的數據庫連接字符串，將 YourTable 替換為你的數據表名稱。
這個示例使用了 ASP.NET Web Forms 的 GridView 控件實現分頁顯示和數據加載。當然，你也可以使用其他后端框架（如 ASP.NET MVC、ASP.NET Core 等）和前端框架（如 React、Angular、Vue.js 等）實現類似功能。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
