Tech Buddies: Gridview Searching and sorting through Jquery

Tuesday, 6 September 2011

Gridview Searching and sorting through Jquery

Paste this on head section of the page....

<head runat="server">
<script type="text/javascript" src="../Scripts/jquery-1.6.1.min.js"></script>
    <script src="../Scripts/jquery.tablesorter.min.js" type="text/javascript"></script>
    <script src="../Scripts/jquery.quicksearch.js" type="text/javascript"></script>
    <title></title>
      <script type="text/javascript">

          function pageLoad() {
          debugger
              $("#Gridview1").tablesorter();//for sorting table

              $("#txtName").quicksearch("table#Gridview1 tbody tr", {
                  noResults: '#GridView1_noresults',
                  stripeRows: ['odd', 'even'],
                  loader: 'span.loading'
              });

          }

    </script>
</head>

Add serch textbox on page....

Search:<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
                           <span class="loading">Loading...<img alt="Loading..." src="../Icon/loader.gif" /></span><br />

//bind code of the gridview

Gridview1.Databind();
Gridview1.UseAccessibleHeader = true;
Gridview1.HeaderRow.TableSection = TableRowSection.TableHeader;

Sample: