colOrder
A button collection that provides column ordering control.
Please note - this property requires the Buttons extension for DataTables.
Description
This button will create a collection button that when activated will show a list of the columns in the table and provide the end user with the ability to modify the ordering that is applied to the table.
The individual ordering buttons use columnOrder, and behave in the manner described in the documentation for that button - e.g. they have sub-buttons that the user can use to control the ordering direction.
While ordering of data in the table is typically done by clicking in a column header, this button type can be useful to have complete control over table ordering when columns are hidden, or if using CardView, when the table is hidden and cards are shown.
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):
className
- Type:
string - Default:
buttons-collection buttons-order
The button's class name. See buttons.buttons.className for details.
columns
- Type:
DataTable.ColumnSelector - Default:
undefined
Columns selector that defines the columns to include in the ordering button set. By default this is undefined which results in all columns being selected, but any of the DataTable.ColumnSelector options can be used to define a custom button set.
text
- Type:
string - Default:
Order
The button's display text. The text can be configured using this option (see buttons.buttons.text) or the buttons.order.dropdown option of the DataTables language object.
Examples
Show the colOrder button with default options:
new DataTable('#myTable', {
layout: {
topStart: {
buttons: ['colOrder']
}
}
});Show the colOrder button, but do not include the first column in the list of columns:
new DataTable('#myTable', {
layout: {
topStart: {
buttons: [
{
extend: 'colOrder',
columns: 'th:nth-child(n+2)'
}
]
}
}
});