客户端从 IndexedDB 延迟加载到 DataTables jquery 插件中

Question

我使用数据表已经有一段时间了，但我最近才开始使用 IndexedDB。在大多数情况下，这两者配合得很好，但是，我遇到了一些问题。

我想做的是从本地数据库加载数据，但不是一次全部加载。原因是它加载了数千条记录，速度很慢。相反，我想用 indexedDB 做我一直在服务器端做的事情——我发送一大块记录和实际有多少记录的总数。 DataTables 能够使用这两种信息来正确分页。

但是，这使用了 fnAjaxSource 选项，该选项采用 url。我需要采用一个以某种方式返回数据的函数。我还没有发现有人在做同样的事情。目前我正在为该项目使用 DataTables 1.9，但是，如果需要，我可以在此页面和类似页面中使用 1.10。但是，通过 API 和文档并没有向我展示任何方法来告诉 DataTables 期望的记录多于它收到的记录。如果您需要我提供任何其他信息，请告诉我，但我无法真正发布示例，因为我不知道自己在做什么。我希望有一个简单的选择，或者我可以通过某种方式编写一个插件来做到这一点，但我还没有看到任何能给我带来希望的东西。

I have asked the question similarly on the DataTables forum here.

我应该澄清一下，我确实没有遇到 IndexedDB 的问题。我可以很好地分块加载数据，并计算满足我的搜索条件的记录总数。问题在于 DataTables 想要所有数据，而不仅仅是一个块，以便知道将存在多少条记录以及如何进行分页。

Answer 1

从 1.10 开始，您可以在初始化 DataTable 时为 ajax 选项传递一个函数。 ajax documentation 有详细信息

作为一个函数，Ajax 调用由您自己决定 [...] 如果需要，可以使用 Ajax 以外的方法来获取所需的数据，例如 Web 存储...

从数据源获取数据后，调用第二个参数（此处为callback）并传入一个参数 - 用于绘制表格的数据。

所以本质上：

$('#example').dataTable( {
  ajax: function (data, callback, settings) {
    // ... retrieve data using parameters in `data` ...
    // ... transform result into format expected by callback ...
    callback(transformed_result);
  }
});

此外，如果您还启用了server-side processing，那么传递给您的函数的data 参数还将包括属性start、length 等，这些属性可用于限制您的记录数从 IndexedDB 请求。

Answer 2

我不太确定我是否理解你。 IDB 不像 LocalStorage，所有内容都加载到内存中。您可以在 IDB 中拥有大量数据并且只获取少量数据。看看将 Ranges 与 curses 一起使用来打开表的一小部分。

我想基本上我要说的是 - 开箱即用，无需做任何“特殊”操作，IDB 支持读取数据块。