滚动仪示例 服务器端处理(5,000,000行)

DataTables'服务器端处理模式是一个完全适合滚动仪的功能。 服务器端处理可用于显示大数据集,服务器用于执行数据 处理,以及滚动仪在滚动视口中优化数据的显示。

使用服务器端处理时,滚动仪将等待少量时间才能滚动 在请求来自服务器的更多数据(默认情况下200ms)之前完成。这可以防止你给药 your own server!

此示例显示使用服务器端处理模式和500万行的滚动仪。 重要的 这个特定的例子使用 ajaxDT 作为“假”数据的函数 显示Scroller显示大数据集的能力。它背后没有真正的数据库!你会 normally not use ajaxDT 作为生成数据的函数,但是 而是作为获取真实数据的位置的URL!

In this example we also enable the loadingIndicator option of Scroller to show the end 用户滚动时发生了什么,通过当前加载的数据。

ID 邮编/邮政编码 国家

下面显示的JavaScript用于初始化此中所示的表 example:

$(document).ready(function() { $('#example').DataTable( { serverSide: true, ordering: false, searching: false, 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 } ); }, 50 ); }, dom: "rtiS", scrollY: 200, scroller: { loadingIndicator: true } } ); } );

除了上面的代码外,还加载了以下JavaScript库文件以供使用 example:

下面显示的HTML是RAW HTML表元素,然后才能增强 DataTables:

此示例使用超出库中加载的内容的一点额外CSS 文件(如下),以便正确显示该表。显示使用的附加CSS below:

在此示例中加载以下CSS库文件以提供造型 table:

此表由Ajax加载数据。已加载的最新数据如下所示。这个数据 将自动更新,因为加载了任何其他数据。

用于执行此表的服务器端处理的脚本如下所示。请注意 这只是使用PHP的示例脚本。服务器端处理脚本可以写入任何内容 language, using 该协议描述于 可列表文件.