Filtering an ASP.NET GridView control with jQuery (C#)

Filtering an ASP.NET GridView control with jQuery (C#)

DataBase Name : Northwind Sample db

Sample

Download : jquery-1.4.1.js
Download :  jquery.quicksearch.js
In Default.aspx page

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master"
         AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery.quicksearch.js" type="text/javascript"></script>
    <script type="text/javascript">
            $(function () {
                $('input#id_search').quicksearch('table#table_example tbody tr');
             })
    </script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <h2>
        <b>Filtering an ASP.NET GridView control with jQuery (C#)</b></h2>
    <strong>Search :</strong>

    <input id=id_search type=text placeholder="Search"><br /><br />




 <asp:GridView ID="table_example" runat="server" AutoGenerateColumns="False"  DataKeyNames="CategoryID"
        DataSourceID="SqlDataSource1"  ClientIDMode="Static" onprerender="table_example_PreRender">
         <Columns>
            <asp:BoundField DataField="CategoryID" HeaderText="CategoryID" ReadOnly="True"
                SortExpression="CategoryID" />
            <asp:BoundField DataField="CategoryName" HeaderText="CategoryName"
                SortExpression="CategoryName" />
            <asp:BoundField DataField="Description" HeaderText="Description"
                SortExpression="Description" />
        </Columns>
    </asp:GridView>

   
    <asp:SqlDataSource ID="SqlDataSource1" runat="server"
        ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        SelectCommand="SELECT * FROM [Categories] ">
       
    </asp:SqlDataSource>

</asp:Content>


In aspx.cs file

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void table_example_PreRender(object sender, EventArgs e)
    {
        if (table_example.Rows.Count > 0)
        {
            table_example.UseAccessibleHeader = true;
            table_example.HeaderRow.TableSection = TableRowSection.TableHeader;
        }
    }
}

Download Sample Project - Download