SORTING ASP.NET GRIDVIEW CONTROL USING JQUERY TABLESORTER PLUGIN

SORTING  ASP.NET GRIDVIEW CONTROL USING JQUERY TABLESORTER PLUGIN


Download jquery first which is given in below .


<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>


<asp:GridView ID="GridView1" runat="server" CellPadding="4" ForeColor="#333333" 
   GridLines="Horizontal" Font-Size="9pt" Font-Names="Arial" 
   AutoGenerateColumns="False" BorderColor="#dadada" 
   BorderStyle="Solid" BorderWidth="1px">
   <Columns>
      <asp:BoundField DataField="ID" HeaderText="ID" 
         ItemStyle-Width="40" />
      <asp:BoundField DataField="Name" HeaderText="Name" 
         ItemStyle-Width="80" />
      <asp:BoundField DataField="Fee" DataFormatString="{0:n0}" HeaderText="Fee" 
         ItemStyle-Width="60" />
      <asp:BoundField DataField="Price" DataFormatString="{0:c}" 
         HeaderText="Price" ItemStyle-Width="60" />
      <asp:BoundField DataField="Discount" DataFormatString="{0:p1}" 
         HeaderText="Discount" ItemStyle-Width="70" />
      <asp:BoundField DataField="Difference" DataFormatString="{0:n1}" 
         HeaderText="Difference" ItemStyle-Width="80" />
      <asp:BoundField DataField="Date" DataFormatString="{0:MMM dd, yyyy}" 
         HeaderText="Date" ItemStyle-Width="100" />
      <asp:BoundField DataField="OnSale" HeaderText="OnSale" 
         ItemStyle-Width="60" />
   </Columns> 
</asp:GridView>

IF YOU DOES NOT WANT FILL DATA FROM END THAN YOU CAN BIND THE DATABASE TABLE .

protected void Page_Load(object sender, EventArgs e)
{
   if (!Page.IsPostBack)
   {
      BindData();
   }
}
private void BindData()
{
   int[] ids = {12, 13, 14, 15, 16};
   string[] names = {"Alice", "James", "Peter", "Simon", "David"};
   int[] fee = { 2299, 5123, 7564, 9595, 1600 };
   decimal[] prices = { 12.99m, 122.23m, 25.64m, 66.85m, 1.60m };
   decimal[] discounts = { 0.2m, 0.194m, 0.4564m, 0.209m, 0.310m };
   decimal[] differences = { -12m, 19.4m, -45.64m, 200.9m, 41.60m };
   string[] dates = { "04-12-2010", "07-23-2010", "07-14-2009", "12-12-2010", "11-03-2019" };
   bool[] onSale = { true, false, true, true, false };

   DataTable table = new DataTable();
   table.Columns.Add("ID", typeof(System.Int32));
   table.Columns.Add("Name", typeof(System.String));
   table.Columns.Add("Fee", typeof(System.Decimal));
   table.Columns.Add("Price", typeof(System.Decimal));
   table.Columns.Add("Discount", typeof(System.Decimal));
   table.Columns.Add("Difference", typeof(System.Int32));
   table.Columns.Add("Date", typeof(System.DateTime));
   table.Columns.Add("OnSale", typeof(System.Boolean));

   for (int i = 0; i < 5; i++)
   {
      DataRow row = table.NewRow();

      row["ID"] = ids[i];
      row["Name"] = names[i];
      row["Fee"] = fee[i];
      row["Price"] = prices[i];
      row["Discount"] = discounts[i];
      row["Difference"] = differences[i];
      row["Date"] = DateTime.Parse(dates[i]);
      row["OnSale"] = onSale[i];

      table.Rows.Add(row);
   } 

   GridView1.DataSource = table; 
   GridView1.DataBind();

   GridView1.UseAccessibleHeader = true;
   GridView1.HeaderRow.TableSection = TableRowSection.TableHeader; 
}

<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>