动态更新html表

Question

我的网页包含一个下拉菜单和一个表格。当用户在下拉列表中进行选择时，这将使用数据动态填充表格。 我想知道填充此表的最佳方法是什么。 我使用Spring MVC和JSP作为我的服务器端技术。在用户进行下拉选择之后，我们很可能会单独请求检索数据，而不是在一开始就检索所有数据。 我有一个想法如下：

1. 使用JSP创建一个隐藏的虚拟表行
2. 检索到数据的响应后，转换为JSON对象
3. 使用JS / JQuery克隆每个JSON对象的虚拟行

这是一个很好的解决方案吗？或者可能有更好的方法？

Answer 1

除非数据非常庞大或快速更改“实时”信息，否则请在表格中使用一系列<tbody id="xxx">...</tbody>元素（每个下拉选项一个）的页面进行投放。在下拉菜单中附加一个'onchange'处理程序，它显示与当前所选选项对应的tbody，并隐藏所有其他选项。

如有必要，您可以采用与AJAX类似的方法来获取数据。使用空<tbody id="xxx">...</tbody>元素为页面提供服务 - 每个选项一个。然后从下拉列表的onchange处理程序“按需”填充tbodys并显示/隐藏，如上所示。如果合适，您可以在inchange处理程序中包含一个测试，以确保每个数据集只被提取一次 - 如果已经收到数据，那么它将被缓存在其tbody中。最终，当填充所有tbodys时，此解决方案将与上面的解决方案完全相同。

Answer 2

更好的方法可能是使用handlebars.js或mustache.js模板（或任何其他前端模板引擎），因为它们都采用JSON对象并将其插入可附加到html的模板中。如果你通过AJAX获取数据，这非常有效，如果AJAX仍然返回JSON，那就更好了。

Answer 3

如果您的项目允许第三方JQuery插件，我建议您查看DataTables。开箱即用它应该做你需要的一切。我已经在各种项目上使用DT几年了，并发现它是一个强大而稳定的插件。