Searchable Gridview using Jquery - Easiest Way

Introduction

This article explains about searching the grid in a more faster way.

Using the code

This is a jquery function which needs to be called for filtering a grid based on the value of Search textbox. This code filters the grid as you type in the textbox.

This is a much faster way and is accurate. I have minimised the number of loops to improve performance in a greater way.

In the below code snippet, gvGrid is the grid which needs to be filtered and txtSearch is the Search textbox where text is entered.

function SearchGrid(){
var strSearch = $('#<%=txtSearch.ClientID%>').val();
$("#<%=gvGrid.ClientID%> tr:has(td)").hide();
        //if nothing is entered then show all the rows.
if(strSearch.length == 0)
        {
          $("#<%=gvGrid.ClientID%> tr:has(td)").show();
          return false;
        }
//Iterate through all the td.
        $("#<%=gvGrid.ClientID%> tr:has(td)").children().each(function()
        {
          
            var cellText = $(this).text().toLowerCase();
            //Check if data matches
            if(cellText.indexOf(strSearch.toLowerCase()) >= 0)
            {   
                $(this).parent().show();
                $(this).children('th').show();
                return true;
            }
          
        });
}

 

Points of Interest

By reducing the number of loops from the original version of code, performance was improved to a greater extent. My application was giving Long running Script error before implementing this function for filtering.