.NET Gridview with jQuery quicksearch

Several key features are needed to get .NET's GridView control to work with jQuery's quicksearch allowing for client side filtering of rows of data. The jQuery will expect to know the id of your target gridview, which .NET will make difficult for you. What was in your code an id of gridview1 becomes something like ctl00_MainContent_Conrol1_gvUserRoles.

If you look at the source of your page after the gridview is added, search for your control name and grab the entire ID. This is the part that goes as a parameter of the quicksearch function, like so:

<script type="text/javascript">
    $(function () {
        $('input#id_search').quicksearch('table#ctl00_MainContent_UserRoles_gvUserRoles tbody .UserRolesRow');
    });
</script>

Note that I change the "table#tableName tbody tr" that most jQuery quicksearch examples use into "table#tableName tbody .tableRow", which is a css class I plan to add to each of my rows. If I didn't do this, I would be loosing my header row when the filter fired. To choose the CSS class of the rows in the gridview, use this line within the gridview:

<RowStyle CssClass="UserRolesRow" />

Check out a full file example here, and good luck in your endeavors.