How to search through GridView records using jQuery

I had already posted "How to filter GridView records using jQuery" but With continuing my experiments with ASP.NET Grid View and jQuery, In this post I will show you how to search through all columns of ASP.NET GridView Data and show only those data which satisfies the search text. I have implemented it using jQuery so sharing with you.

Problem:

First take a look at below image.

As you can see from image, that there is a GridView control populated with data and above that there is a textbox and a button. So the problem was, based on the search text entered in search text box, filter the data from GridView on any of the column . For example, "10" is entered then only those rows should be visible which have 10 in any of the column. It can be in ID, ProductName, Price or quantity column.

Another example, if "L" is entered then below should be the output.

Note: Following controls are placed on the page.

• A GridView
• A Label control which has "No records to display" message.
• And separate link button for each alphabet and one link button for "All".

Solution:

Below are detailed steps to how to do it.

• First, hide the "No records to display" label and also hide all the rows of GridView.

// Hide No records to display label. $('#<%=lblNoRecords.ClientID%>').css('display','none');  //Hide all the rows. $("#<%=gdRows.ClientID%> tr:has(td)").hide();  

• Now declare a counter variable, which will be used to display "No records to display" label. And also get the search textbox value.

var iCounter = 0; //Get the search box value var sSearchTerm = $('#<%=txtSearch.ClientID%>').val(); 

• If nothing is entered in search textbox, then display all gridview rows and return from here. You can also do validation to show alert message to user to enter something. But I have used Search button as Reset button as well so when nothing is entered, display all the GridView rows.

//if nothing is entered then show all the rows. if(sSearchTerm.length == 0)  {   $("#<%=gdRows.ClientID%> tr:has(td)").show();    return false; } // 

• Now run a loop through all the td element of GridView.

//Iterate through all the td. $("#<%=gdRows.ClientID%> tr:has(td)").children().each(function()  { }); // 

• Now within the loop get the td value and compare if the td value matches with the search term. If Yes, then show it's parent (that is tr) and increment the counter variable.

//Iterate through all the td. $("#<%=gdRows.ClientID%> tr:has(td)").children().each(function()  {     var cellText = $(this).text().toLowerCase();     //Check if data matches     if(cellText.indexOf(sSearchTerm.toLowerCase()) >= 0)      {             $(this).parent().show();         iCounter++;         return true;     }  }); // 

• Finally, check if counter variable value is equal to 0. If Yes, then display "No records to display" label.

if(iCounter == 0) {    $('#<%=lblNoRecords.ClientID%>').css('display',''); } // 

So putting it together the complete jQuery code is,

//Code Starts $(document).ready(function() {     $('#<%=lblNoRecords.ClientID%>').css('display','none');      $('#<%=btnSubmit.ClientID%>').click(function(e)     {         // Hide No records to display label.         $('#<%=lblNoRecords.ClientID%>').css('display','none');          //Hide all the rows.         $("#<%=gdRows.ClientID%> tr:has(td)").hide();                   var iCounter = 0;         //Get the search box value         var sSearchTerm = $('#<%=txtSearch.ClientID%>').val();                   //if nothing is entered then show all the rows.         if(sSearchTerm.length == 0)          {           $("#<%=gdRows.ClientID%> tr:has(td)").show();            return false;         }         //Iterate through all the td.         $("#<%=gdRows.ClientID%> tr:has(td)").children().each(function()          {             var cellText = $(this).text().toLowerCase();             //Check if data matches             if(cellText.indexOf(sSearchTerm.toLowerCase()) >= 0)              {                     $(this).parent().show();                 iCounter++;                 return true;             }          });         if(iCounter == 0)         {             $('#<%=lblNoRecords.ClientID%>').css('display','');         }         e.preventDefault();     }) }) //Code Ends 

Download Code

Feel free to contact me for any help related to jQuery, I will gladly help you.