This example is completely artificial in that the data generated is created on the client-side by + just looping around a Javascript array and then passing that to DataTables. However, it does show quite + nicely that DataTables and Scroller can cope with large amounts of data on the client-side quite + nicely. Typically data such as this would be Ajax sourced and server-side processing should be + considered.
+ +Please be aware that the performance of this page will depend on your browser as the array of data + is generated - for example IE6 will crawl!
+| ID | +First name | +Last name | +ZIP / Post code | +Country | +
|---|
The Javascript shown below is used to initialise the table shown in this + example:
$(document).ready(function() {
+ var data = [];
+ for ( var i=0 ; i<50000 ; i++ ) {
+ data.push( [ i, i, i, i, i ] );
+ }
+
+ var oTable = $('#example').dataTable( {
+ data: data,
+ deferRender: true,
+ dom: "frtiS",
+ scrollY: 200,
+ scrollCollapse: true
+ } );
+ } );
+
+ In addition to the above code, the following Javascript library files are loaded for use in this + example:
+ + +The HTML shown below is the raw HTML table element, before it has been enhanced by + DataTables:
+This example uses a little bit of additional CSS beyond what is loaded from the library + files (below), in order to correctly display the table. The additional CSS used is shown + below:
The following CSS library files are loaded for use in this example to provide the styling of the + table:
+ + +This table loads data by Ajax. The latest data that has been loaded is shown below. This data + will update automatically as any additional data is loaded.
+The script used to perform the server-side processing for this table is shown below. Please note + that this is just an example script using PHP. Server-side processing scripts can be written in any + language, using the protocol described in the + DataTables documentation.
+