Step by step

  1. Open visual studio.

  2. Create a web application

  3. Add new page.

  4. Drag a gridview on the page.

  5. On the head section of page call below script and link:
    1. <script src="JS/jquery-1.11.1.js" type="text/javascript">
    2. </script>
    4. <link href="dist/css/theme.default.min.css" rel="stylesheet">
    6. <script src="dist/js/jquery.tablesorter.min.js"></script>
    8. <script>
    9. $(document).ready(function()
    10. {
    11. $("table").tablesorter();
    12. });
    13. </script>

  6. Grid page source like:\
    1. <asp:GridView ID="GridView1" runat="server" CssClass="tablesorter" CellPadding="4" ForeColor="#333333" GridLines="None" OnRowDataBound="GridView1_RowDataBound">
    3. </asp:GridView>
  7. In .cs (code behind) I have create a datatable with some static record and bind to gridview on page load.
    1. protected void Page_Load(object sender, EventArgs e)
    2. {
    3. BindGrid();
    4. }
    5. private void BindGrid()
    6. {
    7. DataTable table = new DataTable();
    8. table.Columns.Add("Dosage", typeof(int));
    9. table.Columns.Add("Drug", typeof(string));
    10. table.Columns.Add("Patient", typeof(string));
    11. table.Columns.Add("Date", typeof(DateTime));
    12. // Here we add five DataRows.
    13. table.Rows.Add(10, "Hydralazine", "Christoff", DateTime.Now);
    14. table.Rows.Add(21, "Combivent", "Janet", DateTime.Now);
    15. table.Rows.Add(100, "Dilantin", "Melanie", DateTime.Now);
    16. GridView1.DataSource = table;
    17. GridView1.DataBind();
    18. }
  8. On gridview rowdatabound event.
    1. protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    2. {
    3. if (this.GridView1.Rows.Count > 0)
    4. {
    5. GridView1.UseAccessibleHeader = true;
    6. GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
    7. // GridView1.FooterRow.TableSection = TableRowSection.TableFooter;
    8. }
    9. }
  9. Final result.


    Note: for js and plugin go to link.