C#

Sorting in Gridview using tablesorter.js in ASP.NET

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>  
    3.   
    4. <link href="dist/css/theme.default.min.css" rel="stylesheet">  
    5.   
    6. <script src="dist/js/jquery.tablesorter.min.js"></script>  
    7.   
    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">  
    2.   
    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.
Ebook Download
View all
Learn
View all
Membership not found