I have a datatable in my jsfiddle below with a working row-reorder event.
https://jsfiddle.net/martinradio/dszyxfj3/6/
I added row-reorder to get the feature where the first column '#' always counts in order correctly even if I drag my 'Ashton Cox' row to the bottom of the table, the '#' column count will be updated via this event handler:
//row-reorder event
table.on( 'row-reorder', function ( e, diff, edit ) {
var result = 'Reorder started on row: '+edit.triggerRow.data()[1]+'<br>';
for ( var i=0, ien=diff.length ; i<ien ; i++ ) {
var rowData = table.row( diff[i].node ).data();
result += rowData[1]+' updated to be in position '+
diff[i].newData+' (was '+diff[i].oldData+')<br>';
}
console.log(result );
} );
I want this row-reordering event to work even when I click the 'Audio' column header, which sorts the table's rows based on the audio field alphabetically. But when I click the audio column to sort the table, it breaks the row-reordering, and causes the '#' column to be out of order like in my pic below:
I added an event listener for when the audio sort column is clicked:
//audio sort clicked
$(`#upload_99_audioCol`).on('click', function(event){
console.log('audio sort clicked')
//NEED TO CALL ROW-REORDER event somehow
})
is there some way I can call my row-reorder event handler whenever I click the audio column, so that my '#' column numbers are always in order?
thanks