Scroller

Scroller is a virtual rendering plug-in for DataTables which allows large datasets to be drawn on screen very 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.

Download

The easiest way to get and use Scroller is to use the DataTables download builder where you can select the software that you wish to use on your page and have a single Javascript and CSS file created and hosted for you.

Alternatively, the individual files can be included on your page, a release package downloaded or the source control repository cloned on GitHub.

Initialisation

Scroller can be initialised on a DataTable by using the scroller option in the DataTables options object - which is simply set to boolean true. It is also possible to use an object for fine grained control (see the reference documentation for full details).

There are a number of other properties that will also be used to maximise the performance benefits offered by Scroller:

• ajax or data - Data for the table. Note that a DOM sourced table will see no performance benefits with Scroller since all elements are already present at the client-side.
• deferRender - Elements will be created only when the are required
• scrollY - Enable vertical scrolling in DataTables.

An example initialisation using Scroller might look like the following code:

$('#myTable').dataTable( {
    ajax:           '/api/data',
    scrollY:        200,
    deferRender:    true,
    scroller:       true
} );

Features

Key features of Scroller 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
• Display millions of rows in a scrollable table
• Integration with state saving in DataTables (scrolling position is saved)
• Easy to use