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
- Create the simple table tblEmp with EmpId, EmpName and EmpSal Field in SQL Server
- Download the Plugin in the local system or use the online plugin as in the following:
- http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js
- https://github.com/christianbach/tablesorter
Step1: Write the code in aspx file like this
- <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
-
- <!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></title>
- <style type="text/css">
- th
- {
- cursor:pointer;
- background-color:#dadada;
- color:Black;
- font-weight:bold;
- text-align:left;
- }
- th.headerSortUp
- {
- background-image: url(images/asc.gif);
- background-position: right center;
- background-repeat:no-repeat;
- }
- th.headerSortDown
- {
- background-image: url(images/desc.gif);
- background-position: right center;
- background-repeat:no-repeat;
- }
- td
- {
- border-bottom: solid 1px #dadada;
- }
- </style>
- <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 () {
- $("#GridView1").tablesorter();
- });
- </script>
-
- </head>
- <body>
- <form id="form1" runat="server">
- <div>
- <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">
- <Columns>
- <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" />
- </Columns>
- </asp:GridView>
- <br />
- <asp:SqlDataSource ID="SqlDataSource1" runat="server"
- ConnectionString="<%$ ConnectionStrings:EmpDBConnectionString %>"
- SelectCommand="SELECT * FROM [tblEmp]"></asp:SqlDataSource>
- </div>
- </form>
- </body>
- </html>
- 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;
- }
- }
In this article we showed how to use tablesorter plugin with ASP.NET GridView.