DataTables example Table controls positioning

When customising DataTables for your usage, you might find the default position of the feature elements (for example the search input) is not quite to your liking or needs to be altered to fit with the layout of your application. DataTables provides the ability to customise these table controls using the layout option. It is worth noting that the layout works across all of the styling integrations that DataTables supports - you can easily change framework and the layout will continue to work as expected.

layout is an object where each property key defines the position and the matching value is the element to show in that position. The value can be a string value matching one of the built in options, or a plug-in if you use any, an HTML element or plain text. It can also be an array of those options for multiple items in each position, or null to show nothing. Please refer to the layout documentation for full details.

The default layout used by DataTables is:

layout: {
	topStart: 'pageLength',
	topEnd: 'search',
	bottomStart: 'info',
	bottomEnd: 'paging'
}

In this example the page length information is replaced by the table information display and the pagination control is shown across the whole of the table's footer area. Note that the bottomStart and bottomEnd properties are set to be null otherwise their default options would be shown.