In this article I will explain with an example, how to get count (number) of rows in ASP.Net GridView using jQuery.
This article will explain how to get the total count of the number of rows in ASP.Net GridView and also how to get the count of the number of all rows except the First (Header) row in ASP.Net GridView using jQuery.
HTML Markup
The following HTML Markup consists of an ASP.Net GridView with three BoundField columns and a Button to get count (number) of rows in ASP.Net GridView using jQuery.
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="Id" HeaderText="Customer Id" ItemStyle-Width="90" />
<asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="120" />
<asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="100" />
</Columns>
</asp:GridView>
<br />
<br />
<asp:Button ID="btnGetCount" Text="Count Rows" runat="server" />
Namespaces
You will need to import the following namespace.
C#
VB.Net
Binding the ASP.Net GridView control
The GridView is populated with a dynamic DataTable with some dummy data inside the Page Load event.
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id"), new DataColumn("Name"), new DataColumn("Country") });
dt.Rows.Add(1, "John Hammond", "United States");
dt.Rows.Add(2, "Mudassar Khan", "India");
dt.Rows.Add(3, "Suzanne Mathews", "France");
dt.Rows.Add(4, "Robert Schidner", "Russia");
GridView1.DataSource = dt;
GridView1.DataBind();
}
}
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Dim dt As New DataTable()
dt.Columns.AddRange(New DataColumn(2) {New DataColumn("Id"), New DataColumn("Name"), New DataColumn("Country")})
dt.Rows.Add(1, "John Hammond", "United States")
dt.Rows.Add(2, "Mudassar Khan", "India")
dt.Rows.Add(3, "Suzanne Mathews", "France")
dt.Rows.Add(4, "Robert Schidner", "Russia")
GridView1.DataSource = dt
GridView1.DataBind()
End If
End Sub
Get Count (Number) of Rows in ASP.Net GridView using jQuery
Inside the document ready event handler, the Button has been assigned a jQuery click event handler. When the Button is clicked, the total count of the number of rows and the count of the number of all rows except the First (Header) row in ASP.Net GridView is determined using jQuery.
Total count of the number of rows
The total count of the number of rows in ASP.Net GridView is determined by selecting all the HTML TR elements using jQuery.
Count of the number of all rows except the First (Header) row
The count of the number of all rows except the First (Header) row in ASP.Net GridView is determined by selecting only those HTML TR elements which contain HTML TD (Cell) element and skipping all the HTML TR elements which contain HTML TH (Header Cell) element.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("[id*=btnGetCount]").click(function () {
var totalRowCount = $("[id*=GridView1] tr").length;
var rowCount = $("[id*=GridView1] td").closest("tr").length;
var message = "Total Row Count: " + totalRowCount;
message += "\nRow Count: " + rowCount;
alert(message);
return false;
});
});
</script>
Screenshot
![Get Count (Number) of Rows in ASP.Net GridView using jQuery]()
Demo
Downloads
