博客详情

  2. 首页菜单

html5 datagrid 例子

2015年03月03日 11:15 0 点赞 0 评论 更新于 2025-11-21 16:36

本文将为你展示如何实现 DataGrid 的分页功能，包含 C# 和 VB.NET 两个版本的示例代码。在使用这些代码时，请记得更改数据库连接字符串。

C# 版本示例

DataGridPaging.aspx

<%@ Page language="c#" EnableViewState = "true" Codebehind="DataGridPaging.aspx.cs" AutoEventWireup="false" Inherits="eMeng.Exam.DataGridPaging.DataGridPaging" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<meta content="Visual Basic 7.0" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" runat="server">
<asp:datagrid id="MyDataGrid" runat="server" AutoGenerateColumns="False" HorizontalAlign="Center" AlternatingItemStyle-BackColor="#eeeeee" HeaderStyle-BackColor="#aaaadd" Font-Size="8pt" Font-Name="Verdana" CellSpacing="0" CellPadding="3" GridLines="Both" BorderWidth="1" BorderColor="black" OnPageIndexChanged="MyDataGrid_Page" PagerStyle-HorizontalAlign="Right" PagerStyle-Mode="NumericPages" PageSize="5" AllowPaging="True">
<AlternatingItemStyle BackColor="#EEEEEE"></AlternatingItemStyle>
<HeaderStyle BackColor="#AAAADD" Font-Bold="True" HorizontalAlign="Center"></HeaderStyle>
<PagerStyle HorizontalAlign="Right" Mode="NumericPages"></PagerStyle>
<Columns>
<asp:BoundColumn HeaderText="标题" DataField="Title" HeaderStyle-Width="480px"></asp:BoundColumn>
<asp:BoundColumn HeaderText="发表日期" DataField="CreateDate" DataFormatString="{0:yyyy-MM-dd hh:mm:ss}"></asp:BoundColumn>
</Columns>
</asp:datagrid>
<p style="FONT-SIZE:9pt" align="center">
<asp:label id="lblPageCount" runat="server"></asp:label>&nbsp;
<asp:label id="lblCurrentIndex" runat="server"></asp:label>
<asp:linkbutton id="btnFirst" onclick="PagerButtonClick" runat="server" Font-Name="verdana" Font-size="8pt" ForeColor="navy" CommandArgument="0"></asp:linkbutton>&nbsp;
<asp:linkbutton id="btnPrev" onclick="PagerButtonClick" runat="server" Font-Name="verdana" Font-size="8pt" ForeColor="navy" CommandArgument="prev"></asp:linkbutton>&nbsp;
<asp:linkbutton id="btnNext" onclick="PagerButtonClick" runat="server" Font-Name="verdana" Font-size="8pt" ForeColor="navy" CommandArgument="next"></asp:linkbutton>&nbsp;
<asp:linkbutton id="btnLast" onclick="PagerButtonClick" runat="server" Font-Name="verdana" Font-size="8pt" ForeColor="navy" CommandArgument="last"></asp:linkbutton>
</p>
</form>
</body>
</HTML>

DataGridPaging.aspx.cs

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Data.OleDb;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

namespace eMeng.Exam.DataGridPaging
{
/// <summary>
/// DataGridPaging 的摘要说明。
/// </summary>
public class DataGridPaging : System.Web.UI.Page
{
protected System.Web.UI.WebControls.DataGrid MyDataGrid;
protected System.Web.UI.WebControls.Label lblPageCount;
protected System.Web.UI.WebControls.Label lblCurrentIndex;
protected System.Web.UI.WebControls.LinkButton btnFirst;
protected System.Web.UI.WebControls.LinkButton btnPrev;
protected System.Web.UI.WebControls.LinkButton btnNext;
protected System.Web.UI.WebControls.LinkButton btnLast;
private OleDbConnection cn = new OleDbConnection();

private void Page_Load(object sender, System.EventArgs e)
{
// 在此处放置用户代码以初始化页面
btnFirst.Text = "最首页";
btnPrev.Text = "前一页";
btnNext.Text = "下一页";
btnLast.Text = "最后页";
OpenDatabase();
BindGrid();
}

private void OpenDatabase()
{
cn.ConnectionString = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + Server.MapPath("xxxx.mdb");
cn.Open();
}

private void ShowStats()
{
lblCurrentIndex.Text = "第 " + (MyDataGrid.CurrentPageIndex + 1).ToString() + " 页";
lblPageCount.Text = "总共 " + MyDataGrid.PageCount.ToString() + " 页";
}

public void PagerButtonClick(object sender, EventArgs e)
{
string arg = ((LinkButton)sender).CommandArgument.ToString();
switch (arg)
{
case "next":
if (MyDataGrid.CurrentPageIndex < (MyDataGrid.PageCount - 1))
{
MyDataGrid.CurrentPageIndex += 1;
}
break;
case "prev":
if (MyDataGrid.CurrentPageIndex > 0)
{
MyDataGrid.CurrentPageIndex -= 1;
}
break;
case "last":
MyDataGrid.CurrentPageIndex = (MyDataGrid.PageCount - 1);
break;
default:
MyDataGrid.CurrentPageIndex = System.Convert.ToInt32(arg);
break;
}
BindGrid();
ShowStats();
}

public void BindGrid()
{
OleDbConnection myConnection = cn;
DataSet ds = new DataSet();
OleDbDataAdapter adapter = new OleDbDataAdapter("Select Title,CreateDate from Document", myConnection);
adapter.Fill(ds, "Document");
MyDataGrid.DataSource = ds.Tables["Document"].DefaultView;
MyDataGrid.DataBind();
ShowStats();
}

public void MyDataGrid_Page(object sender, DataGridPageChangedEventArgs e)
{
int startIndex;
startIndex = MyDataGrid.CurrentPageIndex * MyDataGrid.PageSize;
MyDataGrid.CurrentPageIndex = e.NewPageIndex;
BindGrid();
ShowStats();
}

#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
//
// CODEGEN：该调用是 ASP.NET Web 窗体设计器所必需的。
//
InitializeComponent();
base.OnInit(e);
}

/// <summary>
/// 设计器支持所需的方法 - 不要使用代码编辑器修改
/// 此方法的内容。
/// </summary>
private void InitializeComponent()
{
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
}
}

VB.NET 版本示例

DataGridPaging.aspx

<%@ Page Language="vb" AutoEventWireup="false" Codebehind="DataGridPaging.aspx.vb" Inherits="DataGridPaging"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<meta content="Visual Basic 7.0" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" runat="server">
<asp:datagrid id="MyDataGrid" runat="server" AlternatingItemStyle-BackColor="#eeeeee" HeaderStyle-BackColor="#aaaadd" Font-Size="8pt" Font-Name="Verdana" CellSpacing="0" CellPadding="3" GridLines="Both" BorderWidth="1" BorderColor="black" OnPageIndexChanged="MyDataGrid_Page" PagerStyle-HorizontalAlign="Right" PagerStyle-Mode="NumericPages" PageSize="5" AllowPaging="True">
<AlternatingItemStyle BackColor="#EEEEEE"></AlternatingItemStyle>
<HeaderStyle BackColor="#AAAADD"></HeaderStyle>
<PagerStyle HorizontalAlign="Right" Mode="NumericPages"></PagerStyle>
</asp:datagrid>
<p style="font-size:9pt">
<asp:label id="lblPageCount" runat="server"></asp:label>&nbsp;
<asp:label id="lblCurrentIndex" runat="server"></asp:label>
<asp:linkbutton id="btnFirst" onclick="PagerButtonClick" runat="server" Font-Name="verdana" Font-size="8pt" ForeColor="navy" CommandArgument="0"></asp:linkbutton>&nbsp;
<asp:linkbutton id="btnPrev" onclick="PagerButtonClick" runat="server" Font-Name="verdana" Font-size="8pt" ForeColor="navy" CommandArgument="prev"></asp:linkbutton>&nbsp;
<asp:linkbutton id="btnNext" onclick="PagerButtonClick" runat="server" Font-Name="verdana" Font-size="8pt" ForeColor="navy" CommandArgument="next"></asp:linkbutton>&nbsp;
<asp:linkbutton id="btnLast" onclick="PagerButtonClick" runat="server" Font-Name="verdana" Font-size="8pt" ForeColor="navy" CommandArgument="last"></asp:linkbutton>
</p>
</form>
</body>
</HTML>

DataGridPaging.aspx.vb

Imports System.Data.SqlClient
Imports System.Data
Imports System.Web.UI

Public Class DataGridPaging
Inherits System.Web.UI.Page

Protected WithEvents MyDataGrid As System.Web.UI.WebControls.DataGrid
Protected WithEvents btnFirst As System.Web.UI.WebControls.LinkButton
Protected WithEvents btnPrev As System.Web.UI.WebControls.LinkButton
Protected WithEvents btnNext As System.Web.UI.WebControls.LinkButton
Protected WithEvents btnLast As System.Web.UI.WebControls.LinkButton
Protected WithEvents lblCurrentIndex As System.Web.UI.WebControls.Label
Protected WithEvents lblPageCount As System.Web.UI.WebControls.Label
Protected WithEvents DataGrid1 As System.Web.UI.WebControls.DataGrid

#Region " Web Form Designer Generated Code "

'This call is required by the Web Form Designer.
<System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent()

End Sub

Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init
'CODEGEN: This method call is required by the Web Form Designer
'Do not modify it using the code editor.
InitializeComponent()
End Sub

#End Region

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
btnFirst.Text = "最首页"
btnPrev.Text = "前一页"
btnNext.Text = "下一页"
btnLast.Text = "最后页"
OpenDatabase()
BindGrid()
End Sub

Sub MyDataGrid_Page(ByVal sender As Object, ByVal e As DataGridPageChangedEventArgs)
Dim startIndex As Integer
startIndex = MyDataGrid.CurrentPageIndex * MyDataGrid.PageSize
MyDataGrid.CurrentPageIndex = e.NewPageIndex
BindGrid()
ShowStats()
End Sub

Sub BindGrid()
Dim myConnection As SqlConnection = cn
Dim ds As DataSet = New DataSet()
Dim adapter As SqlDataAdapter = New SqlDataAdapter("Select * from Orders", myConnection)
adapter.Fill(ds, "Orders")
MyDataGrid.DataSource = ds.Tables("Orders").DefaultView
MyDataGrid.DataBind()
ShowStats()
End Sub

Sub PagerButtonClick(ByVal sender As Object, ByVal e As EventArgs)
'used by external paging UI
Dim arg As String = sender.CommandArgument

Select Case arg
Case "next"
If (MyDataGrid.CurrentPageIndex < (MyDataGrid.PageCount - 1)) Then
MyDataGrid.CurrentPageIndex += 1
End If
Case "prev"
If (MyDataGrid.CurrentPageIndex > 0) Then
MyDataGrid.CurrentPageIndex -= 1
End If
Case "last"
MyDataGrid.CurrentPageIndex = (MyDataGrid.PageCount - 1)
Case Else
'page number
MyDataGrid.CurrentPageIndex = System.Convert.ToInt32(arg)
End Select
BindGrid()
ShowStats()
End Sub

Sub ShowStats()
lblCurrentIndex.Text = "第 " + (MyDataGrid.CurrentPageIndex + 1).ToString() + " 页"
lblPageCount.Text = "总共 " + MyDataGrid.PageCount.ToString() + " 页"
End Sub

Public cn As New SqlClient.SqlConnection()
Public Sub OpenDatabase()
cn.ConnectionString = "Server=.;Database=NorthWind;User Id=sa;Password=;"
cn.Open()
End Sub
End Class

完全后台代码写法示例

DataGridPaging2.aspx

<%@ Page language="c#" EnableViewState = "true"  Codebehind="DataGridPaging2.aspx.cs" AutoEventWireup="false" Inherits="eMeng.Exam.DataGridPaging2.DataGridPaging2" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>功能齐全的分页的例子【2】</TITLE>
<meta content="Visual Basic 7.0" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" runat="server">
<asp:datagrid id="MyDataGrid" runat="server" AutoGenerateColumns="False" HorizontalAlign="Center" AlternatingItemStyle-BackColor="#eeeeee" HeaderStyle-BackColor="#aaaadd" Font-Size="8pt" Font-Name="Verdana" CellSpacing="0" CellPadding="3" GridLines="Both" BorderWidth="1" BorderColor="black" PagerStyle-HorizontalAlign="Right" PagerStyle-Mode="NumericPages" PageSize="5" AllowPaging="True">
<AlternatingItemStyle BackColor="#EEEEEE"></AlternatingItemStyle>
<HeaderStyle BackColor="#AAAADD" Font-Bold="True" HorizontalAlign="Center"></HeaderStyle>
<PagerStyle HorizontalAlign="Right" Mode="NumericPages"></PagerStyle>
<Columns>
<asp:BoundColumn HeaderText="标题" DataField="Title" HeaderStyle-Width="480px"></asp:BoundColumn>
<asp:BoundColumn HeaderText="发表日期" DataField="CreateDate" DataFormatString="{0:yyyy-MM-dd hh:mm:ss}"></asp:BoundColumn>
</Columns>
</asp:datagrid>
<p align="center">
<asp:label id="lblPageCount" runat="server" Font-Size="9pt" Font-Bold="True"></asp:label>&nbsp;
<asp:label id="lblCurrentIndex" runat="server" Font-Size="9pt" Font-Bold="True"></asp:label>
<asp:linkbutton id="btnFirst" runat="server" Font-size="9pt" ForeColor="navy" CommandArgument="0"/>&nbsp;
<asp:linkbutton id="btnPrev" runat="server" Font-size="9pt" ForeColor="navy" CommandArgument="prev"/>&nbsp;
<asp:linkbutton id="btnNext" runat="server" Font-size="9pt" ForeColor="navy" CommandArgument="next"/>&nbsp;
<asp:linkbutton id="btnLast" runat="server" Font-size="9pt" ForeColor="navy" CommandArgument="last"/>
</p>
</form>
</body>
</HTML>

DataGridPaging2.aspx.cs

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Data.OleDb;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

namespace eMeng.Exam.DataGridPaging2
{
/// <summary>
/// DataGridPaging 的摘要说明。
/// </summary>
public class DataGridPaging2 : System.Web.UI.Page
{
protected System.Web.UI.WebControls.DataGrid MyDataGrid;
protected System.Web.UI.WebControls.Label lblPageCount;
protected System.Web.UI.WebControls.Label lblCurrentIndex;
protected System.Web.UI.WebControls.LinkButton btnFirst;
protected System.Web.UI.WebControls.LinkButton btnPrev;
protected System.Web.UI.WebControls.LinkButton btnNext;
protected System.Web.UI.WebControls.LinkButton btnLast;
private OleDbConnection cn = new OleDbConnection();

private void Page_Load(object sender, System.EventArgs e)
{
// 在此处放置用户代码以初始化页面
btnFirst.Text = "最首页";
btnPrev.Text = "前一页";
btnNext.Text = "下一页";
btnLast.Text = "最后页";
OpenDatabase();
BindGrid();
}

private void OpenDatabase()
{
cn.ConnectionString = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + HttpContext.Current.Server.MapPath("../../aspxWeb.mdb.ascx");
cn.Open();
}

private void ShowStats()
{
lblCurrentIndex.Text = "第 " + (MyDataGrid.CurrentPageIndex + 1).ToString() + " 页";
lblPageCount.Text = "总共 " + MyDataGrid.PageCount.ToString() + " 页";
}

public void PagerButtonClick(object sender, EventArgs e)
{
string arg = ((LinkButton)sender).CommandArgument.ToString();
switch (arg)
{
case "next":
if (MyDataGrid.CurrentPageIndex < (MyDataGrid.PageCount - 1))
{
MyDataGrid.CurrentPageIndex += 1;
}
break;
case "prev":
if (MyDataGrid.CurrentPageIndex > 0)
{
MyDataGrid.CurrentPageIndex -= 1;
}
break;
case "last":
MyDataGrid.CurrentPageIndex = (MyDataGrid.PageCount - 1);
break;
default:
MyDataGrid.CurrentPageIndex = System.Convert.ToInt32(arg);
break;
}
BindGrid();
ShowStats();
}

public void BindGrid()
{
OleDbConnection myConnection = cn;
DataSet ds = new DataSet();
OleDbDataAdapter adapter = new OleDbDataAdapter("Select Title,CreateDate from Document", myConnection);
adapter.Fill(ds, "Document");
MyDataGrid.DataSource = ds.Tables["Document"].DefaultView;
MyDataGrid.DataBind();
ShowStats();
}

#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
//
// CODEGEN：该调用是 ASP.NET Web 窗体设计器所必需的。
//
InitializeComponent();
base.OnInit(e);
}

/// <summary>
/// 设计器支持所需的方法 - 不要使用代码编辑器修改
/// 此方法的内容。
/// </summary>
private void InitializeComponent()
{
this.MyDataGrid.PageIndexChanged += new System.Web.UI.WebControls.DataGridPageChangedEventHandler(this.OnPageIndexChanged);
this.btnFirst.Click += new System.EventHandler(this.PagerButtonClick);
this.btnPrev.Click += new System.EventHandler(this.PagerButtonClick);
this.btnNext.Click += new System.EventHandler(this.PagerButtonClick);
this.btnLast.Click += new System.EventHandler(this.PagerButtonClick);
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion

private void OnPageIndexChanged(object source, System.Web.UI.WebControls.DataGridPageChangedEventArgs e)
{
int startIndex;
startIndex = MyDataGrid.CurrentPageIndex * MyDataGrid.PageSize;
MyDataGrid.CurrentPageIndex = e.NewPageIndex;
BindGrid();
ShowStats();
}
}
}

以上代码通过不同的方式实现了 DataGrid 的分页功能，你可以根据自己的需求选择合适的示例进行参考和使用。在实际应用中，务必根据实际情况修改数据库连接字符串和 SQL 查询语句。

相关文章

Cocos2d-x游戏开发实例详解7：对象释放时机

03-25 13:59

学习Cocos2d-x Lua：面向对象 - 类和继承

03-25 11:33

学习Cocos2d-x Lua：面向对象 -- 多重继承、私密性

03-25 11:27

学习Cocos2d-x Lua：实现类的原理

03-25 11:22

学习Cocos2d-x Lua：Lua基础之弱引用table

03-25 11:19

作者信息

boke

boke

共发布了 3994 篇文章

查看更多文章