order
An order trigger and status button.
Please note - this property requires the ColumnControl extension for DataTables.
Description
This is perhaps the most common content type used in the examples, as ordering is a fundamental part of DataTables. This button is used to both trigger ordering on its host column and also show the status of ordering applied to the column.
To a large degree, it replaces the ordering icons and event handler that DataTables applies to column headers, so you will often use it in combination with ordering.indicators and ordering.handler to disable DataTable's default controls.
When ordering is activated via the button, it follows the same direction application sequence as defined by columns.orderSequence. Shift click on the buttons will also add the target column to multi-column order. The button's behaviour is identical to DataTables built in listener as the button uses order.listener().
Examples showing the use of this content type are available on the DataTables website.
Display
Generally, this content type will be used at the top level of ColumnControl, thus showing a simple icon button to the end user as it is such a common interaction with the table, but it will also work in a dropdown without issue.
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):
iconAsc
- Type:
string - Default:
orderAsc
Icon to show when ascending order is applied to the host column. Can take the name of any icon available in DataTable.ColumnControl.icons (which is a writeable object containing SVG icons).
iconDesc
- Type:
string - Default:
orderDesc
Icon to show when descending ordering is applied to the host column. Can take the name of any icon available in DataTable.ColumnControl.icons.
iconNone
- Type:
string - Default:
orderNone
Icon to show when there is no order applied to the host column. Can take the name of any icon available in DataTable.ColumnControl.icons.
statusOnly
- Type:
boolean - Default:
false
This option will cause the button not to react to click events when enabled (true), and instead simply shows the ordering status of the column.
text
- Type:
string - Default:
Toggle ordering
Trigger button text (shown when in a dropdown). Can also be set by the orderAsc key of language.columnControl, which will take priority if set.
Examples
Simple, single ordering icon in the table headers, replacing the DataTables default.:
new DataTable('#example', {
columnControl: ['order'],
ordering: {
indicators: false,
handler: false
}
});Status display only, keeping the DataTables default event handler. Note that orderStatus is a shorthand for this configuration.:
new DataTable('#example', {
ordering: {
indicators: false
},
columnControl: [{
extend: 'order',
statusOnly: true
}]
});