The amount of data that Scroller should pre-buffer to ensure smooth scrolling. Please note - this property requires the Scroller extension for DataTables.


To display a smooth scrolling table, Scroller will load more data than it actually needs to display in the viewport. This allows the end user to scroll by small increments without the table needing to redraw.

The value given here determines how many rows of data Scroller will pre-fetch and draw. It is a multiplier that will be multiplied by the number of rows that Scroller determines can fit into a viewport. For example if a viewport of 400px is used with 20px height rows and the default of 9 is used for the display buffer, 180 rows will be loaded. The range of records will be split equally between records before and after the instantaneous display start point.

Setting this value gives the ability to customise the balance between the performance enhancements offered by Scroller through its ability to draw only a sub-set of the rows in the table, and the fact that a data redraw can be an expensive operation, particularly if server-side processing is used and data must be loaded via Ajax.




The display buffer to use


  • Value: 9

Draw 9 pages worth of data on each draw


Set a large display buffer:

$('#example').DataTable( {
	scrollY: true,
	scroller: {
		displayBuffer: 20
} );