BUG Responsive class display none is kept when reordering

[lenamtl]

Hi,

I'm using responsive, colvis (column visibility plug-in for Buttons) and colreorder with statesave I'm having the following issue

See the jfiddle to reproduce http://jsfiddle.net/lenamtl/v341qbyx/23/

I have a lot of columns some are hidden by responsive

Hide some column with colvis till you see one of the column which is hidden by the responsive based on the jsfiddle example let hide all except Role and Register date -the result is ok in table and in statesave value

Let move one column register date in front of Role so now we have Role, Register date and Tool

Now let show all hidden columns using colvis the result is ok in table and in statesave value so now we have Role, register date ( all other columns) and tool

refresh the page the result in table is NOT OK the colunm Register date is now HIDDEN (have display none class) the result is ok in statesave value (the column is visisble in statesave) So this mean this column keep the class display none class from responsive but the column have change position so the column display none class should be removed and it is not

I need an urgent quick fix for this. Thanks

[DataTables]

Thank you for the example. I think that what is happening here is that Responsive is being applied before ColReorder gets a chance to reorder the columns - so Responsive is hiding the data in the original order.

I'll take a look into this when I get a chance, although I've got a significant backlog at the moment I'm afraid.

[lenamtl]

I really need a quick fix for this as this is blocking for the end user, event if it's a dirty fix as a temporary solution....

The only way to see the column again is to reset the table pref so this is cancelling all user preferences.. Or hide then show the column that have the display none class using colvis.

I don't mind to add a call to an event that will maybe compare result and removed the display none to the item that was init hidden from responsive and now is visible.

The problem occurred when we display back the hidden column using Colvis and refresh page. (the display none class is added to the moved item)

If we don't display back the hidden columns using Colvis and refresh page this is ok. (the display none class won't be added to the moved item)

I'm willing to make all tests to speed up the work.

[DataTables]

The two plug-ins both run (1 2) on the preInit event so it is possible that it might be as simple as the loading order, but somehow I doubt it.

I'll need to spend some time digging into what is going wrong. If this is something you want use to prioritise over other things, priority support is available.

[lenamtl]

Thanks for pointing the preInit code, I saw this before but what determine the apply ordering ?

[DataTables]

How they were added as listeners in jQuery - i.e. the load order of the scripts. Its an array so it just loops through it in jQuery.

[lenamtl]

ok then it no difference I have tried multiple position with no luck

[DataTables]

Sorry. Yes, this is going to take a bit more debugging to fully figure it out then. I'll get to it as soon as I can.

[lenamtl]

@DataTables Which order / logical do you think it should follow when using these 3 plugins

ColVis ColReorder Responsive

[DataTables]

Don't load ColVis at all. Use the column visibility plug-in for Buttons.

I suspect ColReorder should be first.

[lenamtl]

Oh yes I'm talking about the column visibility plug-in for Buttons

[lenamtl]

Any news on this?

[DataTables]

No sorry. I've been working on other things. I'll post back here once I get a chance to look into it.

[lenamtl]

Hi,

I may have found the correct order, I made some quick tests and this seems to work. I wild do more tests and let you know.

Here is the new order

<!-- DataTables -->
<script src="assets/js/plugins/datatables/media/js/jquery.dataTables.js"></script>
<script src="assets/js/plugins/datatables/media/js/dataTables.bootstrap.min.js"></script>

<!-- DataTables ColReorder -->
<script src="assets/js/plugins/datatables/extensions/ColReorder/js/dataTables.colReorder.min.js"></script>

<!-- DataTables ColVisibility button -->
<script src="assets/js/plugins/datatables/extensions/Buttons/js/buttons.colVis.js"></script>

<!-- DataTables Responsive -->
<script src="assets/js/plugins/datatables/extensions/Responsive/js/dataTables.responsive.min.js"></script>
<script src="assets/js/plugins/datatables/extensions/Responsive/js/responsive.bootstrap.min.js"></script>

<!-- DataTables Buttons Tools -->
<script src="assets/js/plugins/datatables/extensions/Buttons/js/dataTables.buttons.min.js"></script>
<script src="assets/js/plugins/datatables/extensions/Buttons/js/buttons.bootstrap.min.js"></script>
<!-- DataTables Export / Print -->
<script src="assets/js/plugins/datatables/extensions/Buttons/js/buttons.html5.min.js"></script>
<script src="assets/js/plugins/datatables/extensions/Buttons/js/buttons.print.min.js"></script>
<script src="assets/js/plugins/datatables/extensions/Buttons/js/jszip.min.js"></script>
<script src="assets/js/plugins/datatables/extensions/Buttons/js/pdfmake.min.js"></script>
<script src="assets/js/plugins/datatables/extensions/Buttons/js/vfs_fonts.js"></script>

[chosten]

I think my problem is related but the ordering of the scripts did not work for me. The responsive extension listen to the column-reorder.dtr event so I'm not sure the scripts order matter anyway.

My problem is related to the commit 1092045. Because of this optimization, columns are not updated in some cases after a column-reorder.dtr trigger.

Let's say we have 3 columns, the last two have been switched by the reorder extension, and the responsive extension decides to hide the last column. The state is saved.

Once you reload the page, the responsive extension will hide the last column again with the initial column order. So far, so good. Then column-reorder.dtr event is triggered and once again the responsive extension hides the last column, but this time it won't redraw the columns because columnsVis and oldVis will both equal [true, true, false]. In both case the last column is hidden, but it's not the same column, so we need to redraw it and the children.

Any clever fix other than reverting the commit ? Which works just fine for me but maybe we could add a condition to force the redraw in case it is for a column reorder event.

[DataTables]

No other fix springs immediately to mind. Thank you for your insights into this and the fix. I'm happy that is probably as about as good as it gets at the moment.