Question

我打算使用伟大的同位素插件来显示联系人列表，然后允许他们进行过滤。我遇到的问题是它适用于小型数据集，但我不确定为1000多个数据扩展它的最佳方法。

到目前为止，我的想法是：

加载一个随机子集，然后在点击过滤器时添加节点，以填补空白
在用户滚动时加载更多节点
分页结果
在选择了足够的过滤器以使数字低于预定义阈值之前，不显示联系人。

我不确定这些是否会运作良好，我希望其他人能够面对这种情况并给我一些想法。

Answer 1

您描述的情况非常常见：如何让您的用户访问超出他们可能一次详细查看的更多数据。

有几种方法可以回答这个问题，而正确答案是完全主观的：这取决于您的用户试图查看或处理联系人的方式。在您真正获得满意的解决方案之前，您需要知道用户将使用联系人的内容。

猜猜（但你会比我更清楚！），我希望他们有两件事要做：

查找：寻找特定联系人，他们已经知道他们的名字/句柄。
探索：寻找特定的联系人，但他们不记得他们的名字/句柄。或者他们只是在浏览。

如果您对所有解决方案进行过滤，那么Lookup目标就在其中。 Explore目标是您想要设计的目标：

随机子集：它不是一种很好的浏览方式，因为你基本上只剩下要浏览的子集，然后你必须明确过滤以查看任何新内容。当你不确切知道自己在寻找什么时，很难过滤。
无限滚动：这些天似乎是一种流行的解决方案。我发现它很麻烦，特别是如果你“无限地”滚动1000多个联系人。可能不适合探索目标。
分页：同样繁琐 - 但也许如果分页与字母排序相关联，这可能会很好。
阈值限制：所以...只是依靠过滤？在一些极端情况下，这可能是糟糕的，在这种情况下，用户应用一个过滤器并且他们没有看到任何东西b / c仍未达到阈值（可能有一个很多的最后一个人命名约翰逊，这是你搜索的）。另外，我认为当您不知道自己在寻找什么时，浏览能力非常重要。

我想如果我在你的鞋子里，我会介绍一些联系人的集群。我怀疑1000多个联系人是一个很大的性能问题（少说你说的是一百万！），所以10000+实际上是一个用户约束：他们不能一次查看1000个联系人。

我建议引入一些群集，可能是姓氏或姓氏和名字。然后向用户呈现钻入一个群集的方法，但折叠所有其他联系人，以便它们不会立即可见。 accordian/rollodex paradigm令人感动的东西。这会让您的用户觉得他们正在使用“所有联系人”。可能会为每个群集引入一个最小数量，这样如果群集足够小，您就不用费心去显示它（即，为什么要显示一个群集用于2个或3个或5个联系人 - 只显示联系人）。当应用过滤器时，簇就会消失。

Answer 2

采用Read Through Cache的想法，例如：

创建一个方法，可以加载最多100个（或任何可配置数量）元素的批次。它会：
- 在缓存中搜索（具有主键的JS数组，用于过滤的项目的ID）
- AJAX请求过滤的项目
- AJAX返回的项目将添加到缓存
- AJAX返回的项目也会添加到DOM底部的“加载”区域（见下文），创建的DIV的id是元素的主键
- 服务器最多可发送100个元素。如果没有过滤器，它将发送尚未发送的下一个元素。您需要跟踪加载的元素。如果服务器端（即会话）的缓存数据大小很重要，您可以只跟踪最高连续发送ID（即，如果您发送第一批ID 1,2,3,6,9,10，那么最高ID是3，所以下次你从4发送，...，所以你只保留一个会话值
创建一个可以将缓存的DIV移入/移出同位素容器的方法
onDomReady使用上面的方法加载并按自然顺序显示前20个元素（在您的情况下，它将按字母顺序按名称显示）。它可以是20个元素或50个或任何......
在后台，通过AJAX加载循环，并以100个批量加载所有元素。

装载区域可能很简单：

<html>
  <body>
    <!-- the page stuff -->
    <div id="loader" style='display:none'>
      <!-- all elements are loaded here -->
      <div class="item">...</div>
    </div>
  </body>
</html>

这样您就可以在DOM中逐步加载所有元素，并且只显示所需的内容。

Answer 3

我在追加和安排大量同位素物品时表现不佳，这是因为我是逐步添加物品而不是批量添加物品。它应该是一个明显的选择，但我忽略了一些东西。

请务必使用数组或元素列表，而不是单独加载或删除。

incomingData=['<div>a</div>','<div>b</div>'];
elements=[];

jQuery.each(incomingData,function(ind,val){
    var element = jQuery(val).get(0);
    //$container.isotope('insert', element); //resource heavy
    elements.push(element); 
});

$container.isotope( 'insert', elements ); //less processing

如何使用jquery同位素处理大型数据集

3 个答案: