Introduction
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 http://jquery.com/ there are lot of example with documentation and also allow free download a latest version.
Background
In this example, I used table sorter plug-in which has written by Christian Bach can found http://tablesorter.com/docs/ . 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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<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>
</head>
<body>
<form id="form1" runat="server">
<div id="btnInfo">
<button id="btnBlueLoad" type="button">Load Data</button>
</div>
<div id="result">
</div>
</form>
<script type="text/javascript">
$(function(){
$("#btnBlueLoad").click(function(){
LoadRecord();
});
});
function LoadRecord(){
$.ajax({
type: "POST",
url: "TableSorterBlue.aspx/GetOrderDetailTable",
contentType: "application/json; charset=utf-8",
data: "{}",
dataType: "json",
success: function(msg){
$("#result").html(msg);
formatSorterTable();
}
});
}
</script>
</body>
</html>
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()
form.Controls.Add(userControl)
page.Controls.Add(form)
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
Me.MakeAccessible(Me.gvTSOrderDetail)
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.
