Sorting in gridview using tablesorter.js in

In this article I  am going to implement sorting in gridview using tablesorter.js 

Step by step 

1.   Open visual studio

2.  Create a web application

Sorting in gridview using tablesorter.js in


3.     Add new page

4.     Drag a gridview on the page

Sorting in gridview using tablesorter.js in

5.     On the head section of page call below script and link

<script src="JS/jquery-1.11.1.js" type="text/javascript"></script>
    <link href="dist/css/theme.default.min.css" rel="stylesheet">
    <script src="dist/js/jquery.tablesorter.min.js"></script>
        $(document).ready(function () {

6.     Grid page source like

<asp:GridView ID="GridView1" runat="server" CssClass="tablesorter" CellPadding="4"
            ForeColor="#333333" GridLines="None" OnRowDataBound="GridView1_RowDataBound"  >

 7.     In .cs (code behind) I have create a datatable with some static record and bind to gridview on page load

protected void Page_Load(object sender, EventArgs e) {
    private void BindGrid()
      DataTable table = new DataTable();
        table.Columns.Add("Dosage", typeof(int));
        table.Columns.Add("Drug", typeof(string));
        table.Columns.Add("Patient", typeof(string));
        table.Columns.Add("Date", typeof(DateTime));
        // Here we add five DataRows. 
        table.Rows.Add(10, "Hydralazine", "Christoff", DateTime.Now);
        table.Rows.Add(21, "Combivent", "Janet", DateTime.Now);
        table.Rows.Add(100, "Dilantin", "Melanie", DateTime.Now);
        GridView1.DataSource= table;


8.       On gridview rowdatabound event

 protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
        if (this.GridView1.Rows.Count > 0)
            GridView1.UseAccessibleHeader = true;
            GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
          //  GridView1.FooterRow.TableSection = TableRowSection.TableFooter;


9.    Final result

 Sorting in gridview using tablesorter.js in

 Note : for js and plugin go to below  link


Last updated:3/14/2018 11:27:47 PM


Ryan Down
Ryan Down

Thanks for sharing this information about .js in

Letstrak device allows you to locate your child live using the Letstrak app. Just download to the app and locate your child on the map:

Anand Pandey
Anand Pandey

Thanks Ashok for providing useful information about Sorting in gridview using tablesorter.js in would like to appreciate for making very informative.

Leave Comment