Scroller basic initialisation example

Preamble

Scroller is a plug-in for DataTables which enhances the "infinite scrolling" feature that DataTables has built-in to make the scrolling feel more natural. The scrolling box shown on the page is the full height of the drawn table, but a virtual rendering technique is used to only render the part of the table that is actually viewable in the scrolling viewport in order to increase the speed of drawing.

Note that Scroller assumes that all rows are of the same height (in order to preform the required calculations. You can use 'td { white-space: nowrap; }' in your CSS to ensure that text in rows does not wrap.

This example shows how Scroller for DataTables can be initialised by simply including the character 'S' in sDom (note that the 'S' must come after the 't' in sDom). Deferred rendering an and Ajax data source are also used in this example.

Live example

IDFirst nameLast nameZIPCountry
1ArmandWarren56045Taiwan, Province of China
2XenosSalas71090Liberia
3VirginiaWhitaker62723Nicaragua
4KatoPatrick97662Palau
5PenelopeHensley76634Greenland
6GeorgiaErickson81358Bolivia
7ShadPena20600Palestinian Territory, Occupied
8TanishaHumphrey93371Kenya
9ClaireEspinozaI8S 2S8Panama
10RayaTuckerO8D 8W7Botswana
11OttoBriggs57590Anguilla
12LoganBurt53041Venezuela
13CooperPennington36994France
14KristenPeterson52917Sao Tome and Principe
15JordanVelasquez08884Switzerland
16ZeldaFreemanF9H 1J9Holy See (Vatican City State)
17MaryPachecoA7Y 6X9Niger
18TigerRobles44533Malaysia
19ZeleniaBucknerQ8N 6E5Malawi
20CobyJohnstonN6I 2O9Rwanda
21GillianStrickland12258Cook Islands
22AlfredaMcbrideK5A 3B6Nigeria
23LaithFord19072Czech Republic
24AutumnBartonU9D 9F4Angola
25NadineBrittG4U 8L0Liechtenstein
26XavieraHartT1N 7D2Mali
27NeilPageT3E 9F4Korea
28RoseFrenchB7T 8M2French Polynesia
29AlyssaPooleS1L 2T5Yemen
30ChantaleLynch97316United States
31JermaineDawsonA3H 7A1American Samoa
32AnnGiles54258Korea
33JerryCarr04901South Georgia and The South Sandwich Islands
Showing 1 to 33 of 2,500 entries

Initialisation code

$(document).ready(function() {
	var oTable = $('#example').dataTable( {
		"sScrollY": "200px",
		"sAjaxSource": "media/data/2500.txt",
		"sDom": "frtiS",
		"bDeferRender": true
	} );
} );

Other examples