服务器端处理(5,000,000 行)

DataTables 的服务器端处理模式是一个与 Scroller 完美结合的功能。服务器端处理可用于显示大型数据集,由服务器执行数据处理,而 Scroller 则优化在滚动视口中显示数据。

在使用服务器端处理时,Scroller 会等待一小段时间来允许滚动完成,然后再向服务器请求更多数据(默认 200mS)。这可以防止你对自己的服务器执行 DoS 攻击!

此示例显示 Scroller 使用服务器端处理模式和 500 万行数据。重要提示 此特定示例使用 ajax 作为函数来模拟数据,以显示 Scroller 显示大型数据集的能力。它没有真正的数据库支持!你通常不会使用 ajax 作为生成数据的函数,而是用作获取真实数据的位置的 URL!

ID 名字 姓氏 邮政编码 国家/地区
  • Javascript
  • HTML
  • CSS
  • AJAX
  • 服务器端脚本
  • 注释

下面显示的 JavaScript 用于初始化此示例中显示的表格

$('#example').DataTable({ ajax: function (data, callback, settings) { var out = []; for (var i = data.start, ien = data.start + data.length; i < ien; i++) { out.push([i + '-1', i + '-2', i + '-3', i + '-4', i + '-5']); } setTimeout(function () { callback({ draw: data.draw, data: out, recordsTotal: 5000000, recordsFiltered: 5000000 }); }, 150); }, processing: true, ordering: false, scroller: true, scrollY: 200, searching: false, serverSide: true });
new DataTable('#example', { ajax: function (data, callback, settings) { let out = []; for (var i = data.start, ien = data.start + data.length; i < ien; i++) { out.push([i + '-1', i + '-2', i + '-3', i + '-4', i + '-5']); } setTimeout(() => { callback({ draw: data.draw, data: out, recordsTotal: 5000000, recordsFiltered: 5000000 }); }, 150); }, processing: true, ordering: false, scroller: true, scrollY: 200, searching: false, serverSide: true });

除上述代码外,还加载了以下 Javascript 库文件以用于此示例

    下面显示的 HTML 是原始 HTML 表元素,尚未经过 DataTables 增强

    此示例使用了来自库文件(下面)的一点点其他 CSS,以便正确显示表格。下面显示了所使用的其他 CSS

    为了用于此示例并提供表格样式,加载了以下 CSS 库文件

      此表格通过 Ajax 加载数据。下面显示已加载的最新数据。此数据将随着加载任何其他数据自动更新。

      用于执行此表格服务器端处理的脚本如下所示。请注意,这只是一个使用 PHP 的示例脚本。服务器端处理脚本可以用使用 DataTables 文档中介绍的协议 的任何语言编写。

      其他示例