Usage

Initialisation and configuration of Scroller is performed through the scroller initialisation option for DataTables. This option can be given as a simple boolean value to enable Scroller with its default values, or as an object to provide more granular control.

Simple initialisation

In its most simple case and for most use cases, you can enable Scroller by simply setting scroller: true as an option in the DataTables initialisation:

new DataTable('#myTable', {
    scroller: true,
    scrollY: true
});

Note that scrolling must be enable for the DataTable (scrollY), and paging must be left enabled (which it is by default, paging). This is because Scroller makes use of DataTables' paging abilities to perform the actions it needs.

Row height

It is important to note that for Scroller to work correctly, all rows in the table must be the same height. Any differences in row height will cause the virtual calculations it uses to fail. For this reason, you may wish to add the nowrap class to your table to prevent text wrapping and potentially causing different row heights depending on content. It is a class that is available in the default stylesheet for DataTables and all styling integrations it provides.

Options

Most use cases for Scroller don't require any customisation of its options, however, there are some available if you wish to tweak its behaviour to better suit your use case. In the following example, the scroller.displayBuffer option is used to increase the amount of data that Scroller will load and display before and after the current scrolling viewport (this can reduce the number of requests for data):

new DataTable('#myTable', {
    scrollY: true,
    scroller: {
        displayBuffer: 20
    }
});

Reference

For a complete list of the options that Scroller supports, please refer to the DataTables initialisation options reference. The Scroller examples also demonstrate the options available.