DataTables

• Usage
• Examples
• Styling
• API
• Development
• Editor
• Extras
• Plug-ins
• Blog
• FAQs
• Forums

Purchase

Download

Support

Preamble

This example shows the DataTables table body scrolling in the vertical direction. This can generally be seen as an alternative method to pagination for displaying a large table in a fairly small vertical area, and as such pagination has been disabled here (note that this is not mandatory, it will work just fine with pagination enabled as well!). The example is set up to show grid lines using CSS, which is useful for alignment, both for testing and end user usability. To enable y scrolling simply set the sScrollY parameter to be whatever you want the container wrapper's height to be (any CSS measurement is acceptable, or just a number which is treated as pixels).

Live example

Initialisation code

$(document).ready(function() {
	$('#example').dataTable( {
		"sScrollY": "200px",
		"bPaginate": false,
		"bScrollCollapse": true
	} );
} );

Other examples