10,000 + html 上的记录以快速呈现答案

【问题标题】：10,000 + records on html to render quickly10,000 + html 上的记录以快速呈现
【发布时间】：2012-04-04 17:27:01
【问题描述】：

现在这将是一个非常荒谬的问题。但我能做什么，这是客户的要求。基本上，我们有一个大约 15000 多行的网格（主从类型）（有可能在几年内增加到 30-50000 行）。

我的客户不想要任何分页，也不想要裁剪任何数据。此外，他并没有完全使用最新的硬件，因此在浏览器上进行渲染是一个大问题。他想通过打印出来或在浏览器上浏览来查看所有内容。（你可能都认为这听起来多么疯狂，而且确实如此）。

现在我想通过快速渲染 html 来解决这个问题。目前它是一个简单的 asp.net 网格视图，没有分页。这实质上是呈现 HTML 表格。我认为我的选择是： - 使用 div 手动渲染 html（用于快速加载） - 将其导出为 pdf 或 excel（有什么方法可以导出而不需要借助第三方控件？） - 给手指（给客户：D j/k）

所以总结一下，在 html 上显示 10,000 多条数据记录的最佳方式是什么？

【问题讨论】：

您确实有选择，使用 Nustache 将对象呈现为 html，然后附加到容器，使用 YUI 数据表，最后您可以使用客户端代码使用 Backbone.js 委托渐进式加载类型表这将在您滚动或点击加载更多按钮时加载更多行
长 tables 可能会很慢，因为（较旧的）浏览器需要在开始布局页面之前读取整个表格。也许非桌面解决方案会更好。
您必须考虑您为客户提供的任何解决方案是否会对结果感到满意，我更倾向于使用通用 UI 控件模拟演示并让客户看到什么样的他应该预料到糟糕的用户体验，否则您的声誉可能会受到影响，这对于不切实际的期望是不值得的。
@deeptechtons：非常感谢您的建议。我正在尝试，模板肯定会有所帮助，但是在渐进式加载问题上，由于有时会失败，所以有点不安。
@Hans Kesting：你是对的，长表在页面渲染时有这个问题，我正在考虑使用 div 作为替代方案，但是由于数据是网格形式（典型的行/单元格类型），创建div 只是需要更长的时间，还没有对两者进行性能测试，所以不确定使用 div 会获得多少好处..

标签： c# asp.net html render

【解决方案1】：

您应该进行分页 - 这并不意味着您一次只需要显示一页数据，而是您应该一次检索和呈现一页数据（并不断地一页一页地获取页面直到数据完结了）。

例如，在初始请求中从服务器发送第一页数据。设置一个 js 计时器并使用 AJAX 请求来检索后续数据页面并将其加载到浏览器中。您可以同时进行多个（例如 3-4 个）AJAX 请求来检索页面 - 唯一的办法就是在这种方法中正确实现排序。

我个人会避免使用网格视图并使用手动 java 脚本（在 jquery 的帮助下）或使用一些 java 脚本模板引擎来呈现 html 表。我将使用 JSON 从服务器检索数据。

【讨论】：

他说由于客户要求，他无法实现分页。
@BojanSkrchevski，客户希望一起查看所有数据，而不是一次查看一页。请仔细阅读答案 - 我建议分页检索和显示数据，即您继续使用计时器加载一页数据。
感谢您的快速回复，VinnaC。 :) 渐进式加载绝对是前进的方向，但是我之前没有玩太多，而且它有时似乎在使用不同的浏览器时会出现问题，而且由于我们客户的机器是古老的石器时代浏览器，你永远不知道什么时候 AJAX 和javascript 就放弃了。

【解决方案2】：

考虑使用“滚动条”plug-in for Datatables..

作为 DataTables 1.8 版本的一部分，一个名为“Scroller”的新插件被作为下载包的一部分引入。滚动条是一个 DataTables 的虚拟滚动的实现，它提供了一个垂直滚动表格，滚动表格的整个高度，但只绘制可见显示所需的行，导致性能大幅提升。这是一个非常令人兴奋的 DataTables 的插件不仅可以提高性能，还可以因为它有效地提供了与表格的新用户交互，允许完全滚动非常大的数据集。

【讨论】：

感谢这位伙伴 :) 现在正在调查。干杯

【解决方案3】：

他想通过打印查看所有内容

恕我直言，这是查看所有信息的唯一可行解决方案。 PDF 或 Excel 在处理大量行方面要好得多。

进行渲染非常容易。只需设置 excel mime 类型并返回一个 HTML 表格。

http://www.designdetector.com/archives/05/07/HTMLToExcelTheEasyWay.php

当涉及到 PDF 时，您可能必须使用 PDFSharp 之类的外部库。

【讨论】：

干杯 jgauffin。 :) 我一直在研究 pdfsharp 和其他开源 pdf 生成器。没有意识到对于简单的表结构，切换 mime 类型会在 excel 中打开它。谢谢你:)

【解决方案4】：

我知道这已经晚了将近一年，但以防万一它对某人有所帮助。

使用SlickGrid - 它使用 div 而不是表格，这在 IE 中提供了更多的性能。检查这个example

【讨论】：