排序HTML表格

Question

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();

Answer 1

由于您正在使用jQuery并希望在客户端完成此操作，因此可以尝试使用此方便的插件 。

Answer 2

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.