CODEWITHSUNDEEP
javascriptjqueryhtmlsorting
Devi
Devi

Reputation: 336

Sort HTML Table

I had created html table dynamically like this. Now I want to sort the table based on Name while clicking the Name Header in client side. How can I achieve this?

        StringBuilder sb = new StringBuilder();
        sb.Append("<table border='1' id='tblCustomers'>");

        sb.Append("<tr>");

        sb.Append("<th>");
        sb.Append("Name");
        sb.Append("</th>");

        sb.Append("<th>"); 
        sb.Append("City");
        sb.Append("</th>");          


        sb.Append("</tr>");
        for(int i=0; i< dtcustomers.count;i++)
        {
           sb.Append("<tr>");

           sb.Append("<td>");
           sb.Append(dtcustomers.Rows[i]["Name"]);
           sb.Append("</td>");

           sb.Append("<td>");
           sb.Append(dtcustomers.Rows[i]["City"]);
           sb.Append("</td>");

           sb.Append("</tr>");
        }

         sb.Append("</table>");
         this.mydiv.InnerHtml = sb.ToString();

Upvotes: 0

Views: 999

Answers (2)

matthewpark319
matthewpark319

Reputation: 1263

This is also really useful: https://www.kryogenix.org/code/browser/sorttable/

It gives you a js library to install and from there all you have to do is link it to your project with <script src="sorttable.js"></script> and add a class to your table. Really easy.

Upvotes: 0

kmoney12
kmoney12

Reputation: 4480

Since you are using jQuery and want this done Client Side, you can try this handy plugin.

Upvotes: 4

Related Questions