column-reorder
Columns have been reordered by the end user or API.
Please note - this property requires the ColReorder extension for DataTables.
Description
When using ColReorder you may wish to know when a table has been reordered by an end user or through the API. This event provides that information.
This event is triggered when a column's data structure is moved internally - it does not signify that the reordering has been completed for all columns. For example the colReorder.order()
method can cause multiple column reordering actions. Listen for columns.reordered
to know then all columns have been updated and the table is fully up to date with the requested action.
Please note that, as with all DataTables emitted events, this event is triggered with the dt
namespace. As such, to listen for this event, you must also use the dt
namespace by simply appending .dt
to your event name, or use the on()
method to listen for the event which will automatically append this namespace.
Type
function function( e, settings, details )
- Parameters:
Name Type Optional 1 e
No jQuery event object
2 settings
No DataTables settings object for the table that has been modified
3 details
No An object that contains information about the reordered columns:
Example
Add a class to the reordered column:
var table = new DataTable('#myTable', {
colReorder: true
});
table.on('column-reorder', function (e, settings, details) {
var headerCell = $(table.column(details.to).header());
headerCell.addClass('reordered');
setTimeout(function () {
headerCell.removeClass('reordered');
}, 2000);
});