How to do sorting in gridview on client side using Jquery ?



We can do sorting in gridview using tablesorter jquery plugin. It will do soring of data in client side only. It is very simple to use in

Step1: Write the aspx code like this

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="">
<head runat="server">
 <style type="text/css">
        	background-image: url(images/asc.gif);
        	background-position: right center;
        	background-image: url(images/desc.gif);   
        	background-position: right center;
            border-bottom: solid 1px #dadada;	
    <script src="scripts/jquery-1.4.3.min.js" type="text/javascript"></script>
    <script src="scripts/jquery.tablesorter.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {

    <form id="form1" runat="server">
        <asp:GridView ID="GridView1" Width="312px" runat="server" CellPadding="4" 
            ForeColor="#333333" GridLines="Both"
            Font-Size="9pt" Font-Names="Arial" AutoGenerateColumns="False"
            BorderColor="#DADADA" BorderStyle="Solid" BorderWidth="1px" 
            DataKeyNames="EmpId" DataSourceID="SqlDataSource1">
                <asp:BoundField DataField="EmpId" HeaderText="EmpId" InsertVisible="False" 
                    ReadOnly="True" SortExpression="EmpId" />
                <asp:BoundField DataField="EmpName" HeaderText="EmpName" 
                    SortExpression="EmpName" />
                <asp:BoundField DataField="EmpSal" HeaderText="EmpSal" 
                    SortExpression="EmpSal" />
        <br />
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConnectionString="<%$ ConnectionStrings:EmpDBConnectionString %>" 
            SelectCommand="SELECT * FROM [tblEmp]"></asp:SqlDataSource>

Step 2: Write the code in page load like this

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
    protected void Page_Load(object sender, EventArgs e)
        GridView1.UseAccessibleHeader = true;
        GridView1.HeaderRow.TableSection = TableRowSection.TableHeader; 

Note: Please download the above plugin to test this code.

Posted in Jquery. 1 Comment »

One Response to “How to do sorting in gridview on client side using Jquery ?”

  1. Divya Says:

    How to sort the gridview based on drop down list selected value like price & alpha numerics

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: