在不使用笨重的分页系统的情况下在Web应用程序上显示许多记录

时间:2011-11-21 18:13:12

标签: javascript pagination webui

我有一个Web应用程序,可以从数据库中检索和显示记录。用户的查询可能匹配数千条记录;在这种情况下,用户可以改进他的搜索。

在查询匹配数百条记录的情况下,用户浏览记录可能是有意义的。困扰我的是Web应用程序显示记录的“页面”。在Web应用程序的上下文中,我认为分页是显示此类数据的一种可怕的,可怕的方式。

想象一下以下场景:

  1. 用户运行查询:应用程序表示有20页并显示第1页。

  2. 用户点击第2页,然后点击第3页。

  3. 用户意识到他正在寻找的记录在第2页。用户再次点击第2页。

  4. 用户认为他在第1页看到了类似的记录。用户反复在第1页和第2页之间来回点击以比较记录。

  5. 使用Web应用程序,每次更改页面都需要加载一个全新的页面。最终用户可能认为它只是加载更多数据,但是对于浏览器来说,这与加载完全不同的页面一样多。此外,当用户在第1页和第2页之间来回循环时,一遍又一遍地从服务器加载相同的数据。

    令人疯狂的是,对于配备了数十亿字节内存的现代计算机,我们已经习惯于将其视为计算机重新加载(通过高延迟的慢速连接)文本数据是正常的,这将占用数兆字节最重要的。

    我有一个想法,每次用户滚动到记录页面的底部时,使用JavaScript自动加载新记录(用户没有分页链接点击 - 记录只是作为用户加载滚动)。这听起来不错;但是我想到的一个缺点是,如果不先点击“打印机友好”视图就很难打印页面。

    在不使用笨重的分页系统的情况下,将数据库应用程序填充到Web文档中还有哪些其他想法?

3 个答案:

答案 0 :(得分:1)

我会选择“当用户滚动到页面底部时自动加载新记录”。到目前为止,这是我认为最方便用户的方法之一。

对于打印,您可以对每个分页集进行装配,以便它们接收“no_print”类或者加载新集合时的某些内容。在用户向上滚动时动态添加/删除该类。

答案 1 :(得分:1)

从一开始我就建议在页面滚动时添加新记录。如果你担心得到很长的页面。解决方案是隐藏顶级记录,以便只显示最大数量的记录。但是,您需要为用户提供最大值的选项,或者为所有显示的方式选择no max。此外,根据他们的选择,您可能仍需要提供打印机友好版本。另一个注意事项是,最好在侧面添加一个告诉showing records 35-85 of 200的位置的东西。

答案 2 :(得分:1)

所以在我的应用程序中,我有数百万条记录,用户可以同时查看所有记录。

我通过请求相同的网址但更改请求标头来加载更多记录。

以下是如何实现某些功能的方法。

我们假设你想按字母顺序列出世界上所有的动物。您不希望通过“<上一页1 | 2 | 3 .. 9989下一页>”进行分页。酒吧在底部。

  1. 您将开始并立即查询将返回一组动物的“资源”路线:GET /resources/animals

  2. 您的请求会包含标题,说明您要求的内容。例如,添加range: 0-24标头。相关问题:adding Custom HTTP Headers using Javascript

  3. 在服务器端,您可以确定用户正在请求项目0到24,您可以使用响应标头回复,告诉他您要返回的内容如下:returned: 0-24/12000000。这告诉客户你已经退回了25件物品,从第0项开始到第24项,还剩下1200万件物品。

  4. 渲染从服务器收到的项目。

  5. 当用户向下滚动页面时,查询下一组项目。使用数学并找出当前正在查看的内容,您可以计算用户正在查看的“页面”,然后可以请求相应的结果。

  6. 您可以在on the Dojo examples.

    看到这在实践中有效

    Read more about the subject.