Post
Ask Question

How to do sorting in GridView on client side using JQuery?

We can do sorting in ASP.NET GridView on client side using tablesorter jQuery plugin.It is very simple to use in ASP.NET GridView. It will give very good performance.



Pre-requisites

  1. Create the simple table tblEmp with EmpId, EmpName and EmpSal Field in SQL Server
  2. Download the Plugin in the local system or use the online plugin as in the following:
  3. http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js
  4. https://github.com/christianbach/tablesorter

Step1: Write the code in aspx file like this

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2.    
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4.    
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.  <title></title>  
  8.  <style type="text/css">  
  9.         th  
  10.         {  
  11.             cursor:pointer;  
  12.             background-color:#dadada;  
  13.             color:Black;  
  14.             font-weight:bold;  
  15.             text-align:left;   
  16.         }  
  17.         th.headerSortUp   
  18.         {       
  19.             background-image: url(images/asc.gif);  
  20.             background-position: right center;  
  21.             background-repeat:no-repeat;   
  22.         }  
  23.         th.headerSortDown   
  24.         {       
  25.             background-image: url(images/desc.gif);     
  26.             background-position: right center;  
  27.             background-repeat:no-repeat;   
  28.         }   
  29.         td  
  30.         {  
  31.             border-bottom: solid 1px #dadada;     
  32.         }  
  33.     </style>  
  34.     <script src="scripts/jquery-1.4.3.min.js" type="text/javascript"></script>  
  35.     <script src="scripts/jquery.tablesorter.min.js" type="text/javascript"></script>  
  36.     <script type="text/javascript">  
  37.         $(document).ready(function () {  
  38.             $("#GridView1").tablesorter();  
  39.         });   
  40.     </script>  
  41.    
  42. </head>  
  43. <body>  
  44.     <form id="form1" runat="server">  
  45.     <div>  
  46.         <asp:GridView ID="GridView1" Width="312px" runat="server" CellPadding="4"  
  47.             ForeColor="#333333" GridLines="Both"  
  48.             Font-Size="9pt" Font-Names="Arial" AutoGenerateColumns="False"  
  49.             BorderColor="#DADADA" BorderStyle="Solid" BorderWidth="1px"  
  50.             DataKeyNames="EmpId" DataSourceID="SqlDataSource1">  
  51.             <Columns>  
  52.                 <asp:BoundField DataField="EmpId" HeaderText="EmpId" InsertVisible="False"  
  53.                     ReadOnly="True" SortExpression="EmpId" />  
  54.                 <asp:BoundField DataField="EmpName" HeaderText="EmpName"  
  55.                     SortExpression="EmpName" />  
  56.                 <asp:BoundField DataField="EmpSal" HeaderText="EmpSal"  
  57.                     SortExpression="EmpSal" />  
  58.             </Columns>  
  59.         </asp:GridView>  
  60.         <br />  
  61.         <asp:SqlDataSource ID="SqlDataSource1" runat="server"  
  62.             ConnectionString="<%$ ConnectionStrings:EmpDBConnectionString %>"  
  63.             SelectCommand="SELECT * FROM [tblEmp]"></asp:SqlDataSource>  
  64.     </div>  
  65.     </form>  
  66. </body>  
  67. </html>  
Step 2: Write the code is code behind file like this
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7.   
  8. public partial class _Default : System.Web.UI.Page  
  9. {  
  10.    protected void Page_Load(object sender, EventArgs e)  
  11.    {  
  12.       GridView1.UseAccessibleHeader = true;  
  13.       GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;   
  14.    }  
  15. }  
Summary

In this article we showed how to use  tablesorter plugin with ASP.NET GridView.