Searching, Sorting, Paging in ASP.NET GridView Using jQuery

In this article, you will learn how to perform Searching, Sorting and Paging in an ASP.NET Gridview Control with simple JQuery.

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