GridView Search Filter Highlight using jQuery DataTable Plugin in ASP.Net

Hi aamir,

I have created sample that full-fill your requirement.

For this article I have used Microsoft’s Northwind database. You can download it using the link provided below.

Download Northwind Database

HTML

<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField HeaderStyle-Width="150px" DataField="ContactName" HeaderText="Contact Name"
            ItemStyle-CssClass="forHighlight" />
        <asp:BoundField HeaderStyle-Width="150px" DataField="CustomerID" HeaderText="CustomerID"
            ItemStyle-CssClass="forHighlight" />
        <asp:BoundField HeaderStyle-Width="150px" DataField="City" HeaderText="City" ItemStyle-CssClass="forHighlight" />
    </Columns>
</asp:GridView>
<style type="text/css">
    body
    {
        font-family: Arial;
        font-size: 10pt;
    }
    table
    {
        border: 1px solid #ccc;
    }
    table th
    {
        background-color: #F7F7F7;
        color: #333;
        font-weight: bold;
    }
    table th, table td
    {
        padding: 5px;
        border-color: #ccc;
    }
    .highlight
    {
        background-color: Lime;
    }
</style>
<link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#gvCustomers").prepend($("<thead></thead>").append($(this).find("tr:first"))).dataTable();
        $('#gvCustomers').DataTable();
        $('input[type=search]').on("keyup", function () {
            var searchTerm = $(this).val();
            $(".forHighlight").each(function () {
                var searchPattern = new RegExp('(' + searchTerm + ')', 'ig');
                $(this).html($(this).text().replace(searchPattern, "<span class = 'highlight'>" + searchTerm + "</span>"));
            });
        });
    });
</script>

Code

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        GetData();
    }
}

private void GetData()
{
    string strConnString = ConfigurationManager.ConnectionStrings["conString"].ConnectionString;
    using (SqlConnection con = new SqlConnection(strConnString))
    {
        SqlCommand cmd = new SqlCommand("SELECT ContactName,CustomerID,City FROM Customers", con);
        using (SqlDataAdapter sda = new SqlDataAdapter())
        {
            cmd.Connection = con;
            sda.SelectCommand = cmd;
            using (DataSet ds = new DataSet())
            {
                sda.Fill(ds, "Customers");
                gvCustomers.DataSource = ds;
                gvCustomers.DataBind();
            }
        }
    }
}

Screenshot