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进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
