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.
-