GridView分页显示与数据加载

发布时间：2024-11-01 16:33:01 作者：小樊
来源：亿速云阅读：80

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 等）实现类似功能。

GridView分页显示与数据加载

相关阅读