language.lengthMenu

Page length options string.

Description

Detail the action that will be taken when the drop down menu for the pagination length option is changed. The token _MENU_ is replaced with a default select list of 10, 25, 50 and 100 (or any other value specified by lengthMenu), and can be replaced with a custom select list if required. This option is a per-table setting for pageLength.text which can be used to override this option (for example if two or more page length controls were available for a table).

As of DataTables 2 the DOM structure that is generated can change based on the location of the _MENU_ token in the string. If the token is at the start or the end of the string, the generated DOM will have the select outside of the label. This is done for accessability to allow an explicit link between the select and label (see this article for more details).

If the token is in the middle of the string, the DOM structure created will have the select nested in the label, creating an implicit link (although the for and id attributes are still set). Some screenreaders can struggle with this form and it is not recommended.

This DOM structure distinction is only of significance if you are applying custom styling to the page. You may need to alter your CSS depending on the string used.

Additionally, this property can benefit from the use of language.entries to easily update the string to relate to the specific type of data shown in the table. It's plural will automatically resolve with the number selected in from the list of options. The _ENTRIES_ replacement token should be used where you want the resolved language.entries value to appear.

Type

This option can be given in the following type(s):

• string

Default

• Value: _MENU_ _ENTRIES_ per page

Examples

new DataTable('#myTable', {
	language: {
		lengthMenu: 'Display _MENU_ records'
	}
});

new DataTable('#myTable', {
	language: {
		lengthMenu: 'Display _MENU_ _ENTRIES_',
		entries: {
			_: 'people',
			1: 'person'
		}
	}
});

new DataTable('#myTable', {
	language: {
		lengthMenu:
			'Display <select>' +
			'<option value="10">10</option>' +
			'<option value="20">20</option>' +
			'<option value="30">30</option>' +
			'<option value="40">40</option>' +
			'<option value="50">50</option>' +
			'<option value="-1">All</option>' +
			'</select> records'
	}
});

Related

The following options are directly related and may also be useful in your application development.