In a Web Application, a GridView controls is used to display data fetched from a database. We may also need to provide searching, sorting, and filter functionality in a GridView control's data. In this article, you will learn how to perform Searching, Sorting and Paging in a Gridview Control using simple JQuery.
Step 1: Create a Database
Add 1 table in it. My table looks like the following:
1. Table: tbSorting (say)

JQuery1.gif


Step 2: Open Visual Studio 2005/2008->File->New Website

JQuery2.gif

Step 3: Open Solution Explorer ->Add new item -> Add SearchNSortGrid.aspx

JQuery3.gif

Step 4: Design the page and place a GridView control inside an UpdatePanel and a Textbox Control to search data in GridView. Below is the source code.
Search:
  1. <asp:TextBox ID="txtSearch" runat="server" OnTextChanged="txtSearch_TextChanged" Height="20px" Width="208px" />
  2. <asp:UpdatePanel ID="UpdatePanel1" runat="server" >
  3. <ContentTemplate>
  4. <asp:GridView ID="Gridview2" runat="server" AutoGenerateColumns="False" AllowPaging="True" AllowSorting="True" DataSourceID="dsGridview" Width="540px" CssClass="yui" PageSize="5">
  5. <Columns>
  6. <asp:BoundField DataField="Id" HeaderText="Id" SortExpression="Id" ItemStyle-Width="40px"
  7. ItemStyle-HorizontalAlign="Center" InsertVisible="False" ReadOnly="True" >
  8. <ItemStyle HorizontalAlign="Center" Width="40px" /></asp:BoundField>
  9. <asp:BoundField DataField="First" HeaderText="First"
  10. SortExpression="First" />
  11. <asp:BoundField DataField="Last" HeaderText="Last"SortExpression="Last"/>
  12. <asp:BoundField DataField="Department" HeaderText="Department"
  13. ItemStyle-Width="130px" SortExpression="Department" >
  14. <ItemStyle Width="130px" /></asp:BoundField>
  15. <asp:BoundField DataField="Location" HeaderText="Location"
  16. ItemStyle-Width="130px" SortExpression="Location" >
  17. <ItemStyle Width="130px" /></asp:BoundField>
  18. </Columns>
  19. </asp:GridView>
  20. </ContentTemplate>
  21. <Triggers>
  22. <asp:AsyncPostBackTrigger ControlID="txtSearch" EventName="TextChanged" />
  23. </Triggers>
  24. </asp:UpdatePanel>
  25. Step 5: Bind the GridView data with the SqlDataSource.
  26. <asp:SqlDataSource ID="dsGridview" runat="server"
  27. ConnectionString="<%$ ConnectionStrings:testDBConnectionString2 %>"
  28. SelectCommand="SELECT [Id], [First], [Last], [Department], [Location] FROM [tbSorting]"
  29. FilterExpression="First like '%{0}%' or Last like '%{1}%'"><FilterParameters>
  30. <asp:ControlParameter Name="First"ControlID="txtSearch" PropertyName="Text"/>
  31. <asp:ControlParameter Name="Last" ControlID="txtSearch" PropertyName="Text"/>
  32. </FilterParameters> </asp:SqlDataSource>
Step 6: Add JavaScript and CSS inside head portion of the page.
  1. <script type="text/javascript">
  2. jQuery(document).ready(function () {
  3. $("#Gridview2").tablesorter({ debug: false, widgets: ['zebra'], sortList: [[0, 0]] });
  4. });
  5. </script>
  6. Also add a reference of the two js files and 1 CSS.
  7. <script type="text/javascript" src=http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js > </script>
  8. <script type="text/javascript" src="Scripts/jquery.tablesorter-2.0.3.js"></script>
  9. <link type="text/css" rel="stylesheet" href="Scripts/style1.css" />
Step 7: Now write the following code in code behind.
  1. using System;
  2. using System.Web;
  3. using System.Collections.Generic;
  4. using System.Linq;
  5. using System.Web.UI;
  6. using System.Web.UI.WebControls;
  7. using System.Web.UI.Adapters;
  8. using System.Web.UI.WebControls.WebParts;
  9. using System.Web.UI.HtmlControls;
  10. using System.Data.SqlClient;
  11. using System.Text;
  12. using System.Text.RegularExpressions;
  13. using System.IO;
  14. public partial class SearchNSortGrid : System.Web.UI.Page
  15. {
  16. string SearchString = "";
  17. public string connection;
  18. protected void Page_Load(object sender, EventArgs e)
  19. {
  20. connection = System.Configuration.ConfigurationManager.ConnectionStrings["Connectionstring"].ToString();
  21. txtSearch.Attributes.Add("onkeyup", "setTimeout('__doPostBack(\'" + txtSearch.ClientID.Replace("_", "$") + "\',\'\')', 0);");
  22. if (!IsPostBack)
  23. {
  24. Gridview2.DataBind();
  25. }
  26. }
  27. protected void txtSearch_TextChanged(object sender, EventArgs e)
  28. {
  29. SearchString = txtSearch.Text;
  30. }
  31. public string HighlightText(string InputTxt)
  32. {
  33. string Search_Str = txtSearch.Text.ToString(); // Setup the regular expression and add the Or operator.
  34. Regex RegExp = new Regex(Search_Str.Replace(" ", "|").Trim(), RegexOptions.IgnoreCase); // Highlight keywords by calling the //delegate each time a keyword is found.
  35. return RegExp.Replace(InputTxt, new MatchEvaluator(ReplaceKeyWords)); // Set the RegExp to null.
  36. RegExp = null;
  37. }
  38. public string ReplaceKeyWords(Match m)
  39. {
  40. return "<span class=highlight>" + m.Value + "</span>";
  41. }
  42. }
Step 8: Run application (Press F5).
Summary
The final page looks like the following.
Figure: 1.1: On first time load

JQuery4.gif

Figure 1.2: On searching with initials 'As'
JQuery5.gif

Figure 1.3: On sorting with department column field in ASC order

JQuery6.gif

Figure 1.4: On paging in GridView.

JQuery7.gif