How to prevent sorting on drag/drop when using ColReorder on horizontally scrollable table?
How to prevent sorting on drag/drop when using ColReorder on horizontally scrollable table?
I've noticed that if I have a horizontally scrollable table by using either scrollX
or wrapping the table within a <div class="table-responsive">
(bootstrap) that the columns fire off an unwanted sort after the drop (ColReorder).
Here's the code to initialize the table:
$('#example').DataTable({
info: false,
filter: false,
paging: false,
scrollX: true, // causes sort after reorder drop
//dom: '<"table-responsive"t>', // also causes sort after reorder drop
colReorder: true
});
This is sort of a tough one to explain so I've put together a fiddle that shows the issue I'm seeing. You'll notice that if you drag one of the column headers and drop them into their new location, the entire column will then sort. If you comment out the scrollX option (or set to false) then the sort no longer fires after the drop. One other gotcha is that you must have your cursor over the new column header location when dropping or the sort does not fire.
https://jsfiddle.net/a3x4urwd/
Is there anything I can do to prevent this unwanted sort from happening?