为表格显示数据设置无限滚动并仅渲染一小部分数据

Question

我正在开发一个项目，该项目至少提取50,000个必须显示为表格数据的数据集。数据集从我们的MySQL数据库中获取。用户有以下要求......

1. 用户不想设置分页，但他们希望在向下滚动页面时呈现越来越多的表格行。
2. 如果它们向上滚动，则用户不应该看到向下滚动时先前显示的表行。这意味着我必须删除之前创建的表行或隐藏它们。
3. 滞后或加载时间，以便不检测任何明显的延迟或延迟。

我们的项目使用LAMP（Python）堆栈和Django作为框架。我们使用Django模板作为服务器端模板。我不知道如何将相同的体验转化为客户端。我有一个方法的想法，有人可以验证它或纠正它吗？

我的预期方法如下：

1. 在加载时获取原始数据集的某个行子集（比如5000）。这将使用memcached缓存服务器端。在页面加载时，仅显示它的某个子集（比如100）。每个页面都将具有与页码或页面大小相关联的特定状态。这些将使用HTML5历史记录pushstate API进行初始化。

2. 当发出ajax请求时，将获取其他数据集，并将其他表行附加到现有表行。

3. 当用户向上滚动并到达前一页时，表行会被删除或隐藏。

我不知道如何实施第3步。我应该听哪个事件？我应该检查哪些先决条件才能触发第3步。我也不知道第2步是否是正确的方法。

Answer 1

这就是我要做的事情：

1. 将类（scrolled-past）添加到滚动窗口顶部的任何行。 （如果您使用的是jQuery，jQuery Waypoints是检测此功能的绝佳工具。）
2. 到达底部时获取更多数据。
3. 获取数据后，隐藏所有.scrolled-past个元素，追加新行并滚动到表格的顶部（现在第一行的位置是之前最可见行的那个）。

隐藏，追加和滚动时可能会出现故障，但我打赌你会用一个小时的调整来确定它。在步骤3中将最上面的可见行的精确顶部偏移量添加到滚动偏移量是使其更加整洁的一种方法。