Click here to Skip to main content
12,762,098 members (40,607 online)
Click here to Skip to main content
Add your own
alternative version


40 bookmarked
Posted 20 Oct 2008

Sorting Gridview using Jquery with ASP.NET

, 20 Oct 2008 CPOL
Rate this:
Please Sign up or sign in to vote.
This article demonstrate flexible client-side table sorting


This is my first article; I want to apologize in my English. In this example, I want to show how to sorting a gridview using a Jquery in ASP.NET, it is a flexible client-side table sorting. We have known that Jquery is a new kind of Javascript Library. You can find detail of Jquery in this site there are lot of example with documentation and also allow free download a latest version.


In this example, I used table sorter plug-in which has written by Christian Bach can found . It is really cool plug-in and user can allow to download and customization as their wish.

I test this example in Visual Studio 2005. Some of other requirement needed is download a latest version of Jquery from official website and table sorter plug-in which can found as I mention above website.

Here we go,

Using the Code

First, we need some image file which require for click in Gridview header. Then, we need to add a CSS file to make proper position and color.

In this example, I use ajax json serialize to load data into the Gridview

<%@ Page Language="VB" AutoEventWireup="false"
    CodeFile="TableSorterBlue.aspx.vb" Inherits="TableSorterBlue" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="" >
<head runat="server">
<title>Table Sorter Blue</title>
<link href="App_Themes/bluestyle.css" rel="stylesheet" type="text/css" media="print, projection, screen"/>
<script language="javascript" type="text/javascript" src="script/jquery-1.2.6.min.js"></script>
<script language="javascript" type="text/javascript" src="script/jquery.tablesorter.js"></script>
<script language="javascript" type="text/javascript" src="script/Sorter.js"></script>
<form id="form1" runat="server">
<div id="btnInfo">
<button id="btnBlueLoad" type="button">Load Data</button>
<div id="result">
<script type="text/javascript">
function LoadRecord(){
type: "POST",
url: "TableSorterBlue.aspx/GetOrderDetailTable",
contentType: "application/json; charset=utf-8",
data: "{}",
dataType: "json",
success: function(msg){

In the code behind a Page of TableSorterBlue.aspx :

Partial Class TableSorterBlue
Inherits System.Web.UI.Page
<WebMethod(enablesession:=True)> _
Public Shared Function GetOrderDetailTable() As String
    Dim page As New Page()
    Dim userControl As UserControl = DirectCast(page.LoadControl(
        "~/controls/GridViewControl.ascx"), UserControl)
    userControl.EnableViewState = False
    Dim form As New HtmlForm()
    Dim textWriter As New StringWriter()
    HttpContext.Current.Server.Execute(page, textWriter, False)
    Return Clean(textWriter.ToString())
End Function
Private Shared Function Clean(ByVal html As String) As String
    Return Regex.Replace(html, "<[/]?(form)[^>]*?>", "", RegexOptions.IgnoreCase)
End Function
End Class

And in a user control I create a Gridview but make sure you make accessible property to true as what I did in the code:

Partial Class controls_GridViewControl
Inherits System.Web.UI.UserControl
Protected Sub Page_Load(ByVal sender As Object,
    ByVal e As System.EventArgs) Handles Me.Load
End Sub
Private Sub MakeAccessible(ByVal grd As GridView)
    If grd IsNot Nothing AndAlso grd.Rows.Count > 0 Then
        grd.UseAccessibleHeader = True
        grd.HeaderRow.TableSection = TableRowSection.TableHeader
    End If
End Sub
End Class

TableRowSection.TableHeader can help to create a <thead> and <tbody> which is synchronize with table sorter plug-in.

Now, you can click on arrow up and down it start sorting a row.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Sailung Limbu
Software Developer
Nepal Nepal
No Biography provided

You may also be interested in...

Comments and Discussions

Answerfor all types of options like sorting, searching, paging....printing... Pin
varaprasadreddy.bh18-Dec-12 9:01
membervaraprasadreddy.bh18-Dec-12 9:01 
GeneralMy vote of 1 Pin
jayeshvpatel21-Jul-10 2:00
memberjayeshvpatel21-Jul-10 2:00 
GeneralNot working with linkbutton Pin
computerhussain31-Oct-09 3:43
membercomputerhussain31-Oct-09 3:43 
GeneralIt doesn't work with Allow Paging = true Pin
Thiago Valente27-Feb-09 5:13
memberThiago Valente27-Feb-09 5:13 
GeneralExcellent Pin
web5130213-Nov-08 11:58
memberweb5130213-Nov-08 11:58 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170217.1 | Last Updated 20 Oct 2008
Article Copyright 2008 by Sailung Limbu
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid