为数据的表格显示设置无限滚动并仅呈现一小部分数据

Posted 2023-02-24

【中文标题】为数据的表格显示设置无限滚动并仅呈现一小部分数据

【英文标题】：Setting up infinite scroll for tabular display of data and rendering only a small subset of data

【发布时间】：2013-07-28 04:19:06

【问题描述】：

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

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

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

我的预期方法如下：

在加载时获取原始数据集的特定行子集（例如 5000）。这将使用 memcached 缓存在服务器端。在页面加载时，只会显示其中的某个子集（例如 100 个）。每个页面都会有特定的状态，例如页码或页面大小。这些将使用 html5 历史推送状态 API 进行初始化。

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

当用户向上滚动并到达上一页时，表格行将被删除或隐藏。

我不知道如何实现第 3 步。我应该听什么事件？为了触发第 3 步，我应该检查哪些先决条件。我也不知道第 2 步是否正确。

【问题讨论】：

您希望滚动出界的行立即消失吗？ （也许你现在已经解决了这个问题？）

我还没有解决。这项工作没有被优先考虑。

【参考方案1】：

我会这样做：

将类 (scrolled-past) 添加到滚动到窗口顶部的任何行。 （如果您使用的是 jQuery，jQuery Waypoints 是一个很好的检测工具。） 到达底部时获取更多数据。 获取数据后，隐藏所有 .scrolled-past 元素，追加新行并滚动到表格顶部（现在第一行是之前可见的最上面的行）。

隐藏、附加和滚动时可能会出现故障，但我敢打赌，你会通过一个小时的调整来解决这个问题。在步骤 3 中将最上面可见行的确切顶部偏移量添加到滚动偏移量是使其更整洁的一种方法。

【讨论】：

如何检查您是否滚动过该行？对不起，我有点JS新手。

要么你使用一个插件，比如 jQuery Waypoints，要么你这样做： 1) 使用setInterval(func, delay) 设置一个计时器。 2）在setInterval回调函数中，迭代所有行，对于每一行的top offset小于window的滚动偏移，添加class。