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 is reordered - if colReorder.realtime
is enabled this can be during the column reordering drag.
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:
integer
from
- Column index that the column has been moved frominteger
to
- Column index that the column has been moved toarray
mapping
- Array of integers that define how the old column positions map to the new positionsboolean
drop
- Indicate if this event is the result of a mouse drop (i.e. the user has finished moving the columns). This is useful to distinguish between a live reorder and the final state. Requires ColReorder 1.2.1 or newer.
Example
Add a class to the reordered column:
var table = $('#example').DataTable( {
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 );
} );