動態更新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幾年，並發現它是一個強大而穩定的插件。