Searching and Sorting and Paging in Grid view Control with Simple JQuery


In a Web Application, we mainly use Gridview controls to display data fetched from a database. Dynamically data also needs to be searched and sorted. Sorting users usually requires a lot of coding for gridviews on sorting, searching and paging events. 
In this article, you will learn how to perform Searching, Sorting and Paging in a Gridview Control with simple JQuery.

Step 1: Create a Database

Add 1 table in it.

1. Table: tbSorting (say)


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


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


Step 4: Design the page and Place required grid view control inside update Panel and a Textbox Control to search data in grid view. Below is the source code.

Search: <asp:TextBox ID="txtSearch" runat="server" OnTextChanged="txtSearch_TextChanged" Height="20px" Width="208px"  />  

<asp:UpdatePanel ID="UpdatePanel1" runat="server" >
<asp:GridView ID="Gridview2" runat="server" AutoGenerateColumns="False" AllowPaging="True" AllowSorting="True" DataSourceID="dsGridview" Width="540px" CssClass="yui" PageSize="5">
 <asp:BoundField DataField="Id" HeaderText="Id" SortExpression="Id" ItemStyle-Width="40px"
ItemStyle-HorizontalAlign="Center" InsertVisible="False" ReadOnly="True" >
<ItemStyle HorizontalAlign="Center" Width="40px" /></asp:BoundField>
<asp:BoundField DataField="First" HeaderText="First"
SortExpression="First" />
<asp:BoundField DataField="Last" HeaderText="Last"SortExpression="Last"/> 
<asp:BoundField DataField="Department" HeaderText="Department"
ItemStyle-Width="130px" SortExpression="Department" >
<ItemStyle Width="130px" /></asp:BoundField>
<asp:BoundField DataField="Location" HeaderText="Location"
ItemStyle-Width="130px" SortExpression="Location" >
<ItemStyle Width="130px" /></asp:BoundField>
<asp:AsyncPostBackTrigger ControlID="txtSearch" EventName="TextChanged" />

Step 5: Bind the GridView data with the SqlDataSource.

<asp:SqlDataSource ID="dsGridview" runat="server"
ConnectionString="<%$ ConnectionStrings:testDBConnectionString2 %>"       
SelectCommand="SELECT [Id], [First], [Last], [Department], [Location] FROM [tbSorting]"
FilterExpression="First like '%{0}%' or Last like '%{1}%'"><FilterParameters>
asp:ControlParameter Name="First"ControlID="txtSearch" PropertyName="Text"/>
<asp:ControlParameter Name="Last" ControlID="txtSearch" PropertyName="Text"/>

Step 6: Add Java Scripts and CSS inside head portion.

  1. <script type="text/javascript">
      jQuery(document).ready(function () {
       $("#Gridview2").tablesorter({ debug: false, widgets: ['zebra'], sortList: [[0, 0]] });

  2. Also add a reference of the two js files and 1 CSS.

    <script type="text/javascript" src= > </script>
    script type="text/javascript" src="Scripts/jquery.tablesorter-2.0.3.js"></script>
    <link type="text/css" rel="stylesheet" href="Scripts/style1.css" />

Step 7: Now at the code behind write the code as given Below.

using System;

using System.Web;

using System.Collections.Generic;

using System.Linq;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.Adapters;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using System.Data.SqlClient;

using System.Text;

using System.Text.RegularExpressions;

using System.IO;


public partial class SearchNSortGrid : System.Web.UI.Page


    string SearchString = "";

    public string connection;


    protected void Page_Load(object sender, EventArgs e)


     connection = System.Configuration.ConfigurationManager.ConnectionStrings["Connectionstring"].ToString();

  txtSearch.Attributes.Add("onkeyup", "setTimeout('__doPostBack(\'" + txtSearch.ClientID.Replace("_", "$") + "\',\'\')', 0);");

   if (!IsPostBack)





    protected void txtSearch_TextChanged(object sender, EventArgs e)


        SearchString = txtSearch.Text;


    public string HighlightText(string InputTxt)


      string Search_Str = txtSearch.Text.ToString();         // Setup the regular expression and add the Or operator.  

        Regex RegExp = new Regex(Search_Str.Replace(" ", "|").Trim(), RegexOptions.IgnoreCase);         // Highlight keywords by calling the         //delegate each time a keyword is found.   

        return RegExp.Replace(InputTxt, new MatchEvaluator(ReplaceKeyWords));         // Set the RegExp to null. 

        RegExp = null;


    public string ReplaceKeyWords(Match m)


        return "<span class=highlight>" + m.Value + "</span>";



Step 8: Run application (Press F5).


The Final Layouts Will be as given Below.

Figure: 1.1: On Load At first time.


Figure 1.2: On Searching with initials 'As'


Figure 1.3: On Sorting with Department Column Field in ASC Order


Figure 1.4: On Paging in Grid view.



Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now