Since: RowReorder 1.0.0

Rows have been reordered by the end user.
Please note - this property requires the RowReorder extension for DataTables.


When using RowReorder you will likely wish to know when a table has been reordered by an end user so you can update a data store to reflect these changes. This event provides that ability.

The data that has been changed by RowReorder is given in two different forms in the parameters for the event handler callback - one with detailed information about the individual rows, and one with data in a format suitable for Editor's multi-row editing feature.

This event is triggered when a row is dropped, but prior to the new data being written to the database.

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.


function function( e, details, edit )



Add a class to all changed rows:

var table = $('#example').DataTable( {
	rowReorder: true
} );

table.on( 'row-reorder', function ( e, diff, edit ) {
	for ( var i=0, ien=diff.length ; i<ien ; i++ ) {
} );

Use Editor's multi-row editing to update a database on row reorder:

table.on( 'row-reorder', function ( e, details, changes ) {
		.edit( changes.nodes, false, {
			submit: 'changed'
		} )
		.multiSet( changes.dataSrc, changes.values )
} );