Rearranging columns highlights all text with colReorder

faresk93

I am using ColReorder with my Datatable. The first time I click on a column header to move it, all of the text in the table gets highlighted for some reason. (Moving the column still works.) Oddly enough, this only happens the very first time I do this, after page load. Afterwards, it does not highlight any text.

This isn't an issue with functionality, just appearance (it looks really bad to the end user).
Only that I noticed when removing the ordering **false configuration (or "orderable**" in columns) this issue is solved. But still, I want to keep the ordering false option !

Thanks in advance for any help!

My datatable code is:

$('#example').dataTable( {
"ordering": false,
"colReorder": true
} );

kthorngren

That problem doesn't seem to happen with this example. The problem is specific to your page. To help debug we will need to see the page. Please post a link to your page ro a running test case showing the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

simon_ruddock

So I've been having the same issue.

Removed each of the settings one by one. The issue occurs when you disable ordering.

So something about the ordering of rows being disabled causes the dragging and dropping to highlight all the text. Perhaps the ordering function has a measure to prevent this as it's a clickable button, but doesn't activate when not required.

kthorngren

Here is a test case showing the issue with order: false:
http://live.datatables.net/mudifova/1/edit

Kevin

simon_ruddock

So a fix seems to be:

1. add the following noselect class to your headers
   https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting

2. add cursor: pointer to your headers as well