在 html 中加載表格需要很長時間

Question

我有一張大桌子，需要很長時間才能加載到網絡上。 我正在尋找一種加快加載時間的解決方案，而且我不打算將其拆分為各個頁面。 有什么建議嗎？？ 這是鏈接： http : //khi.ac.ir/EnglishW/info/Students/All_Students.aspx

Answer 1

嘗試使用 JQuery DataTables 服務器端處理來完成此任務。

http://www.datatables.net/release-datatables/examples/data_sources/server_side.html

這將是減少加載時間的唯一方法，因為它不是一次加載每個表行，而是一次加載一組行。

Answer 2

你添加這樣一行：

<td style="width: 20%">
<a id="HyperLink8821120010" style="color:Black;font-family:Tahoma;text-decoration:none;" target="_blank" href="StudentNumber_8821120010.aspx">آهي عاطفه</a>
</td>

對於每個條目。 我建議先不要添加style="color:Black;font-family:Tahoma;text-decoration:none;" 對於每個表列，並在單獨的 css 文件中使用它，還只顯示用戶的姓名和一些 javascript 以將額外信息（如下載鏈接）添加到下一個td元素，例如：

<td>
 <a onclick="addInfoToNextColomn()">آهي عاطفه</a>
</td>
<td id="next">
</td>

Answer 3

對於那些在 2019 年尋找答案的人，以下是我針對類似問題嘗試過的一些路徑：

使用所有數據創建一個二維數組作為變量； 對我來說，它將表格大小從 10mb 減少到 3mb，如果我發現重復的長文本並用短占位符替換它們，可能會進一步減少它。 這具有加快下載速度的優勢，但會減少解釋時間。

可以使用簡單的字符串粘合器或 dom .appendChild 構建器來解釋二維數組。 我發現字符串連接器的工作速度最快。

function createTable(tableData) {
  var firstdiv = document.getElementById("wrapper");
  var i = 0;
  var text = "<table><thead><tr><th>Project</th><th>Planner</th><th>Item</th><th>Comment</th></tr></thead><tbody>";
  var item;
  for (i = 0; i < tableData.length; i++) {
    item = tableData[i];
    text += "<tr><td>" + item[0] + "</td><td>" + item[1] + "</td><td>" + item[2] + "</td><td>" + item[3] + "</td></tr>";
      }
  text += "</tbody></table>"

  firstdiv.innerHTML = text;
}