Question

我像这样动态创建了html表。现在，我想在客户端单击名称标题时根据名称对表进行排序。我怎样才能做到这一点？

        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，并且想要完成客户端，您可以尝试this handy plugin。

Answer 2

这也非常有用：https://www.kryogenix.org/code/browser/sorttable/

它为您提供了一个js库来安装，然后您只需使用@RequestMapping(value = {"/"}, method = RequestMethod.GET) public String showPage(Model model, @RequestParam(defaultValue = "0") int page) { model.addAttribute("data", phonebookRepository.findAll(PageRequest.of(page, 10))); model.addAttribute("currentPage", page); return "index"; } @PostMapping("/save") public String save(@Valid Phonebook p, BindingResult bindingResult) { if (bindingResult.hasErrors()) { return "redirect:/"; }else { phonebookRepository.save(p); } return "redirect:/"; }将其链接到您的项目，然后将一个类添加到表中即可。真的很容易。

排序HTML表

2 个答案: