Sorting Gridview Using Jquery Table Sorter plugin.

Aman Sharma
Sorting is very much needed while working with Gridview. We can sort data using code in code behind file and also using Jquery.

In this article I will use jquery  TableSorter plugin to sort data in gridview. It is very easy to implement.

Create a table:

Click on Image to Enlarge View

Now add a simple webform in your application. Add following jquery CDN and Jquery code to head section of HTML markup.

Jquery Script:

<script   src=""></script>

    <%--CDN for TableSorter Plugin --%>
    <script src='' type="text/javascript"></script>
        $(document).ready(function () {

Now add a Gridview and bind it to database and Wrtie code in code behind file to show table header and body.

Design Page:

<html xmlns="">
<head runat="server">
      <script   src=""></script>
    <%--CDN for TableSorter Plugin --%>
    <script src='' type="text/javascript"></script>
        $(document).ready(function () {
    <form id="form1" runat="server">
        <asp:GridView ID="grdIcon" runat="server" AutoGenerateColumns="False"
           CellPadding="3" Width="400px" BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" >
 <asp:BoundField DataField="Article" SortExpression="Article" HeaderText="Article" />
  <asp:BoundField DataField="Note" SortExpression="Note" HeaderText="Note" />
          <asp:BoundField DataField="File_Name" SortExpression="File_Name" HeaderText="File Name" /> 
            <FooterStyle BackColor="White" ForeColor="#000066" />
            <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
            <RowStyle ForeColor="#000066" />
            <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
            <SortedAscendingCellStyle BackColor="#F1F1F1" />
            <SortedAscendingHeaderStyle BackColor="#007DBB" />
            <SortedDescendingCellStyle BackColor="#CAC9C9" />
            <SortedDescendingHeaderStyle BackColor="#00547E" />

Code Behind File using C#:

Add Folllowing Namespaces:

using System.Configuration;
using System.Data.SqlClient;
using System.Data;

Write following code to Bind Gridview:

SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["con"].ToString());
    DataTable dt;
    protected void Page_Load(object sender, EventArgs e)
        if (!IsPostBack)

    public void FillGrid()
            SqlDataAdapter adp = new SqlDataAdapter("Select * from File_Attachment", con);
            dt = new DataTable();
            if (dt.Rows.Count > 0)
            grdIcon.DataSource = dt;
           // enable the gridview to display the thead and tbody 
           grdIcon.UseAccessibleHeader = true;
           grdIcon.HeaderRow.TableSection = TableRowSection.TableHeader;
        catch (Exception ex)


Post a Comment

Post a Comment (0)

#buttons=(Accept !) #days=(20)

Our website uses cookies to enhance your experience. Learn More
Accept !