pageLength
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, in addition to those options which are available for all buttons (e.g. buttons.buttons.text):
| Name | Type | Default |
|---|---|---|
action | ||
Show the collection to allow page length selection. | ||
className | buttons-collection buttons-page-length | |
The button's class name. See | ||
text | {'-1': 'Show all rows', _: 'Show %d rows'} | |
The button's display text. By default this is a function that uses the object shown, where the | ||
Examples
DataTables initialisation: Show the pageLength button with default options:
new DataTable('#myTable', {
layout: {
topStart: {
buttons: ['pageLength']
}
}
});Page length button with lengthMenu specified:
new DataTable('#myTable', {
layout: {
topStart: {
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):
new DataTable('#myTable', {
language: {
buttons: {
pageLength: {
_: 'Afficher %d éléments',
'-1': 'Tout afficher'
}
}
},
layout: {
topStart: {
buttons: ['pageLength']
}
}
});