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 
Ratings:
2 Comment(s)
 483  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>

    <script>

        $(document).ready(function () {

            $("table").tablesorter();

 

        });

   

    </script>

6.     Grid page source like

<asp:GridView ID="GridView1" runat="server" CssClass="tablesorter" CellPadding="4"

            ForeColor="#333333" GridLines="None" OnRowDataBound="GridView1_RowDataBound"  >

           

        </asp:GridView>

 


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

        BindGrid();

    }

    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;

        GridView1.DataBind();

    }

  

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


http://tablesorter.com/docs/

 

 


Ryan Down

By Ryan Down on   6 months 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   6 months ago
good sample.. happy coding buddy

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

Follow MindStick