pageLength

Since: Buttons 1.1.0

Button collection that will control the DataTables' page length. Please note - this property requires the Buttons extension for DataTables.

Description

It is quite common to have four table control and information elements around a DataTable - one in each corner. DataTables' default display as a page length control in the top left, which where Buttons are often inserted, resulting in the page length list being dropped to keep the control elements limited to four.

The default page length list could of course be inserted back into the document by simply adding the l option to the dom configuration, but it might look visually confusing.

As a result Buttons offers this pageLength button type as part of its core software which functions as a direct replacement to the DataTables default length list. This allows page length control to be retained while enjoying full styling integration with Buttons.

This button will read the configuration used for the DataTables lengthMenu configuration option, so the same configuration can be used for this buttons as well as DataTables' default page length control.

Options

This button can have the following options set in its configuration object to customise its actions and display:

Examples

DataTables initialisation: Show the pageLength button with default options:

$('#myTable').DataTable( {
	dom: 'Bfrtip',
	buttons: [ 'pageLength' ]
} );

Page length button with lengthMenu specified:

$('#myTable').DataTable( {
	dom: 'Bfrtip',
	lengthMenu: [
		[ 10, 25, 50, -1 ],
		[ '10 rows', '25 rows', '50 rows', 'Show all' ]
	],
	buttons: [
		'pageLength'
	]
} );

Custom language string for the collection button (note the use of an object to allow the -1 value (i.e. show all) to be specified as a language string):

$('#myTable').DataTable( {
	dom: 'Bfrtip',
	language: {
		buttons: {
			pageLength: {
				_: "Afficher %d éléments",
				'-1': "Tout afficher"
			}
		}
	},
	buttons: [
		'pageLength'
	]
} );