具有数千行的 HTML 表答案

【问题标题】：HTML Table with thousands of rows具有数千行的 HTML 表
【发布时间】：2015-01-04 11:05:41
【问题描述】：

我有一个服务器，它将提供 json 中的对象列表，我想在客户端的表格中显示它们。

我最初的直觉是在从服务器获得结果后编辑 DOM。从 json 中创建整个 table DOM 元素，然后在包含 table 的元素上调用 replaceChild。

但是，有数千行，并且可能由于其大小，在更新表时用户界面会冻结。此外，这个过程似乎有点笨拙——直接操作 DOM 似乎应该在库中完成。我也在考虑实施分页来解决闪烁问题，但同样，感觉就像我正在解决一个一般问题来解决我的特定问题。

在这里做什么是正确的？这项任务似乎很常见。有没有比仅仅破解 DOM 更好的方法来解决这个问题，或者这正是你应该做的？

【问题讨论】：

要显示这么多行，您可以考虑分页。
有这方面的库。一个例子是 jquery 数据表：datatables.net
jQuery 有一些插件可以很好地进行分页。这可能是你需要的。虽然取决于有多少记录，将它们全部卸载到客户端可能不是最佳体验，而是使用服务器端处理方法进行分页
您是否尝试过将格式化的 HTML 累积成一个巨大的字符串，然后使用.innerHTML 将其放置在页面上？看起来这可能比循环执行 createElement 和 appendChild 更快。
也许你可以一次做 100 个，当用户将第 90 个滚动到页面上时加载下一个 100。我相信搜索“无限滚动”应该会产生一些结果。

标签： javascript html json dom

【解决方案1】：

您可以使用SlickGrid 之类的内容。

通过应用他们称之为自适应虚拟滚动的东西，它具有非常快的渲染速度（非常像我认为的@Grim 评论）。

这是基于one 的基本示例的一段代码：

HTML：

<table width="100%">
  <tr>
    <td valign="top" width="50%">
      <div id="myGrid" style="width:600px;height:500px;"></div>
    </td>
  </tr>
</table>

JS：

  var grid;
  var columns = [
    {id: "title",    name: "Title",    field: "title"},
    {id: "duration", name: "Duration", field: "duration"},
    {id: "start",    name: "Start",    field: "start"},
    {id: "finish",   name: "Finish",   field: "finish"}
  ];

  var options = {
    enableCellNavigation: true,
    enableColumnReorder: false
  };

  $(function () {
    var data = getYourJSONDataArray();
    grid = new Slick.Grid("#myGrid", data, columns, options);
  });

JSON 对象上的键必须与列数组中的字段值匹配。

【讨论】：