我使用了jQuery网格插件，这是很好的。

演示

我能想到的最佳方法是在每次滚动或滚动结束前以json格式加载数据块。Json可以很容易地转换为对象，因此可以很容易地不引人注目地构造表行

我推荐带有Buffered View特性的Ext JS Grid。

http://www.extjs.com/deploy/dev/examples/grid/buffer.html

https://github.com/mleibman/SlickGrid/wiki

“SlickGrid利用虚拟渲染，使您能够轻松地处理数十万个项目，而不会降低性能。事实上，使用10行网格和使用10万行网格在性能上没有区别。”

以下是一些最突出的结果:

自适应虚拟滚动(处理数十万行) 极快的渲染速度 背景后期渲染更丰富的单元格 可配置和自定义 全键盘导航 列调整/排序/显示/隐藏 柱自动调整尺寸和力配合 可插入的单元格格式化器和编辑器 支持编辑和创建新行。” 由mleibman

它是免费的(MIT许可证)。 它使用jQuery。

这里有一些优化，你可以应用来加快速度。只是想出来了。

由于行数可能以百万计，因此需要一个仅用于来自服务器的JSON数据的缓存系统。我无法想象有人想要下载全部X万个项目，但如果他们这么做了，这就会成为一个问题。这个小测试在Chrome上的一个数组上20M+整数崩溃在我的机器上不断。

var data = [];
for(var i = 0; i < 20000000; i++) {
    data.push(i);
}
console.log(data.length);​

您可以使用LRU或其他缓存算法，并设置愿意缓存的数据量的上限。

For the table cells themselves, I think constructing/destroying DOM nodes can be expensive. Instead, you could just pre-define X number of cells, and whenever the user scrolls to a new position, inject the JSON data into these cells. The scrollbar would virtually have no direct relationship to how much space (height) is required to represent the entire dataset. You could arbitrarily set the table container's height, say 5000px, and map that to the total number of rows. For example, if the containers height is 5000px and there are a total of 10M rows, then the starting row ≈ (scroll.top/5000) * 10M where scroll.top represents the scroll distance from the top of the container. Small demo here.

为了检测何时请求更多数据，理想情况下，对象应该充当侦听滚动事件的中介。该对象跟踪用户滚动的速度，当用户看起来正在减速或完全停止时，对相应的行发出数据请求。以这种方式检索数据意味着数据将是碎片化的，因此在设计缓存时应考虑到这一点。

此外，浏览器对最大传出连接的限制也可以发挥重要作用。用户可以滚动到某个位置，该位置将触发AJAX请求，但在此完成之前，用户可以滚动到其他部分。如果服务器的响应不够快，请求就会排队，应用程序看起来也没有响应。您可以使用一个请求管理器，所有请求都通过它路由，它可以取消挂起的请求以腾出空间。

免责声明:我大量使用YUI DataTable很长一段时间没有头痛。它强大而稳定。根据您的需要，您可以使用支持ScrollingDataTable

x-scrolling y-scrolling xy-scrolling 强大的事件机制

对于你所需要的，我认为你想要的是一个tableScrollEvent。它的API说

当固定滚动数据表具有滚动时触发。

由于每个数据表都使用一个数据源，您可以通过tableScrollEvent以及呈现循环大小来监视其数据，以便根据需要填充ScrollingDataTable。

渲染循环大小表示

如果您的DataTable需要显示一个非常大的数据集的全部，renderLoopSize配置可以帮助管理浏览器DOM呈现，这样UI线程就不会被锁定在非常大的表上。任何大于0的值都将导致DOM呈现在setTimeout()链中执行，该链在每个循环中呈现指定的行数。理想值应该在每个实现中确定，因为没有硬性的规则，只有一般的指导方针:

By default renderLoopSize is 0, so all rows are rendered in a single loop. A renderLoopSize > 0 adds overhead so use thoughtfully. If your set of data is large enough (number of rows X number of Columns X formatting complexity) that users experience latency in the visual rendering and/or it causes the script to hang, consider setting a renderLoopSize. A renderLoopSize under 50 probably isn't worth it. A renderLoopSize > 100 is probably better. A data set is probably not considered large enough unless it has hundreds and hundreds of rows. Having a renderLoopSize > 0 and < total rows does cause the table to be rendered in one loop (same as renderLoopSize = 0) but it also triggers functionality such as post-render row striping to be handled from a separate setTimeout thread.

例如

// Render 100 rows per loop
 var dt = new YAHOO.widget.DataTable(<WHICH_DIV_WILL_STORE_YOUR_DATATABLE>, <HOW YOUR_TABLE_IS STRUCTURED>, <WHERE_DOES_THE_DATA_COME_FROM>, {
     renderLoopSize:100
 });

<WHERE_DOES_THE_DATA_COME_FROM>只是一个单一数据源。它可以是JSON、JSFunction、XML甚至单个HTML元素

在这里你可以看到一个简单的教程，由我提供。注意，没有其他DATA_TABLE插件同时支持单点和双击。YUI DataTable允许您。更重要的是，你甚至可以在JQuery中使用它而不会感到头疼

你可以看到一些例子

列表项

请随意询问关于YUI DataTable的任何其他问题。

问候,

datagrid提供了数据的JS抽象，因此您可以使用所提供的dojo将其连接到各种后端。数据存储或自己编写。显然，您需要一个支持对这么多记录进行随机访问的系统。DataGrid还提供了完全的可访问性。

请编辑，这里有一个指向Matthew Russell文章的链接，该文章应该会提供您所需要的示例，使用dojox.grid查看数百万条记录。注意，它使用了旧版本的网格，但概念是相同的，只是有一些不兼容的API改进。

哦，它是完全免费的开源软件。

我建议你读一读

http://www.sitepen.com/blog/2008/11/21/effective-use-of-jsonreststore-referencing-lazy-loading-and-more/

我有点看不到这一点，对于jqGrid，你可以使用虚拟滚动功能:

http://www.trirand.net/aspnetmvc/grid/performancevirtualscrolling

但话又说回来，数百万行的过滤可以完成:

http://www.trirand.net/aspnetmvc/grid/performancelinq

我真的不明白“好像没有书页”的意义，我的意思是……没有办法在浏览器中一次显示1,000,000行——这是10MB的原始HTML，我有点不明白为什么用户不想看到这些页面。

无论如何……

(免责声明:我是SlickGrid的作者)

更新 这已经在SlickGrid中实现了。

有关如何使SlickGrid工作于大量行的讨论，请参阅http://github.com/mleibman/SlickGrid/issues#issue/22。

The problem is that SlickGrid does not virtualize the scrollbar itself - the scrollable area's height is set to the total height of all the rows. The rows are still being added and removed as the user is scrolling, but the scrolling itself is done by the browser. That allows it to be very fast yet smooth (onscroll events are notoriously slow). The caveat is that there are bugs/limits in the browsers' CSS engines that limit the potential height of an element. For IE, that happens to be 0x123456 or 1193046 pixels. For other browsers it is higher.

在“large -fix”分支中有一个实验性的解决方案，通过将可滚动区域的“页面”设置为1M像素的高度，然后在这些页面中使用相对定位，可以显著提高该限制。由于CSS引擎中的高度限制似乎不同，而且明显低于实际的布局引擎，这给了我们一个更高的上限。

我仍在寻找一种方法，在不放弃SlickGrid目前相对于其他实现的性能优势的情况下实现无限行的数量。

吕迪格，你能详细解释一下你是怎么解决的吗?

我建议sigma网格，sigma网格有嵌入分页功能，可以支持数百万行。而且，您可能需要远程分页来完成此操作。 查看演示 http://www.sigmawidgets.com/products/sigma_grid2/demos/example_master_details.html

我可以非常肯定地说，您确实不需要向用户显示数百万行数据。

世界上没有任何用户能够理解或管理该数据集，因此即使您在技术上设法实现了它，也无法为该用户解决任何已知问题。

相反，我将关注用户为什么想要查看数据。用户不希望看到数据只是为了看到数据，通常会有一个问题被提出。如果你专注于回答这些问题，那么你就会更接近解决实际问题的方法。

I don't mean to start a flame war, but assuming your researchers are human, you don't know them as well as you think. Just because they have petabytes of data doesn't make them capable of viewing even millions of records in any meaningful way. They might say they want to see millions of records, but that's just silly. Have your smartest researchers do some basic math: Assume they spend 1 second viewing each record. At that rate, it will take 1000000 seconds, which works out to more than six weeks (of 40 hour work-weeks with no breaks for food or lavatory).

他们(或者你)真的认为一个人(看着表格的那个人)能集中那么多注意力吗?他们真的在这一秒内完成了很多事情吗?还是他们(更有可能)过滤掉了不想要的东西?我怀疑，在查看了“合理大小”的子集之后，他们可能会向您描述一个过滤器，该过滤器将自动过滤掉这些记录。

正如paxdiablo和Sleeper Smith和Lasse V Karlsen所暗示的那样，您(和他们)没有仔细考虑需求。从好的方面来看，现在您已经找到了SlickGrid，我确信对这些过滤器的需求变得非常明显。

我强烈推荐Open rico。 一开始很难实施，但一旦你抓住了它，你就永远不会回头。

在我看来，最好的网格如下:

Flexigrid: http://flexigrid.info/ jQuery网格:http://www.trirand.com/blog/ jqGridView: http://plugins.jquery.com/project/jqGridView jqxGrid: https://www.jqwidgets.com/ 英格丽德:http://reconstrukt.com/ingrid/ SlickGrid http://github.com/mleibman/SlickGrid

datatable http://www.datatables.net/index

屏蔽 http://demos.shieldui.com/web/grid-virtualization/performance-1mil-rows 智能电网 https://www.htmlelements.com/demos/grid/overview/

我最好的3个选择是jqGrid, jqxGrid和DataTables。它们可以处理数千行数据并支持虚拟化。

我知道这个问题已经存在几年了，但是jqgrid现在支持虚拟滚动:

http://www.trirand.com/blog/phpjqgrid/examples/paging/scrollbar/default.php

但是禁用了分页

我知道这是个老问题，但是…还有dhtmlxGrid可以处理数百万行。有一个演示有50,000行，但可以在网格中加载/处理的行数是无限的。

免责声明:我来自DHTMLX团队。

(声明:我是w2ui的作者)

我最近写了一篇关于如何用100万条记录实现JavaScript网格的文章(http://w2ui.com/web/blog/7/JavaScript-Grid-with-One-Million-Records)。我发现，最终有3个限制因素会阻止你把分数提高:

div的高度有限制(可以通过虚拟滚动来克服) 在大约100万条记录之后，诸如排序和搜索之类的操作开始变慢 RAM是有限的，因为数据存储在JavaScript数组中

我已经用100万条记录(IE除外)测试了网格，它表现良好。有关演示和示例，请参阅文章。

看看dGrid:

https://dgrid.io/

我同意用户永远不需要同时查看数百万行数据，但是dGrid可以快速显示它们(一次显示一整屏)。

不要把海洋烧开来泡一杯茶。