Home > DeveloperSection > Blogs > Sorting in gridview using tablesorter.js in asp.net

Sorting in gridview using tablesorter.js in asp.net

ASP.Net C#  JQuery  Gridview  Sorting 
3 Comment(s)
 990  View(s)
Rate this:

Sorting in gridview using tablesorter.js in asp.net


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


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

<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


 Note : for js and plugin go to below  link




Ryan Down

By Ryan Down on   one year ago
Thanks for sharing this information about .js in asp.net.............
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: https://www.letstrak.com/

Sorting in gridview

By John Smith on   one year ago
good sample.. happy coding buddy


By Anand Pandey on   5 months ago

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

Don't want to miss updates? Please click the below button!

Follow MindStick