Scroller example Scroller examples

Scroller is a virtual rendering plug-in for DataTables which allows large datasets to be drawn on screen every quickly. What the virtual rendering means is that only the visible portion of the table (and a bit to either side to make the scrolling smooth) is drawn, while the scrolling container gives the visual impression that the whole table is visible. This is done by making use of the pagination abilities of DataTables and moving the table around in the scrolling container DataTables adds to the page. The scrolling container is forced to the height it would be for the full table display using an extra element.

Scroller is initialised by simply including the letter S in the domDT for the table you want to have this feature enabled on. Note that the S must come after the t parameter in domDT.

Key features include:

Speed! The aim of Scroller for DataTables is to make rendering large data sets fast
Full compatibility with DataTables' deferred rendering for maximum speed
Integration with state saving in DataTables (scrolling position is saved)
Easy to use

Scroller example State saving

Scroller will automatically integrate with DataTables in order to save the scrolling position of the table, if state saving is enabled in the DataTable (stateSaveDT). This example shows that in practice - to demonstrate, scroll the table and then reload the page.

ID	First name	Last name	ZIP / Post code	Country

Javascript
HTML
CSS
Ajax
Server-side script

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() {
	$('#example').DataTable( {
		ajax:           "data/2500.txt",
		deferRender:    true,
		dom:            "frtiS",
		scrollY:        200,
		scrollCollapse: true,
		stateSave:      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.

Other examples

Please refer to the DataTables documentation for full information about its API properties and methods.
Additionally, there are a wide range of extras and plug-ins which extend the capabilities of DataTables.

Scroller example Scroller examples

Examples

Scroller example State saving

Other examples

Examples