Datatables responsive plugin conflict with bootstrap-switch

joeyjojojr

Hi, I discovered a problem using checkboxes formatted using the bootstrap-switch plugin from bootstrap-switch.org/ in a datatable using the responsive plugin. The checkboxes work fine in the normal datatable, but as soon as the browser is resized and the responsive plugin kicks in to hide the checkbox column(s), the checkboxes are no longer clickable until resizing again so that the data all fits on the screen again. I'm really not sure if this is a problem on the datatables responsive plugin side or bootstrap-switch but their website is currently down at the moment so it makes it more difficult to ask the question there. I'm usually fairly good at debugging this type of issue but I've looked at the code and really cannot figure out what could be causing the issue. Any hints or tips are very much appreciated, as well as any workaround suggestions.

Here is a simple jsfiddle demonstrating the behavior: https://jsfiddle.net/w9kgge7b/5/

Thank you in advance!

kthorngren

You jsfiddle was missing the responsive.bootstrap.min.css so the child row never showed. I updated it here:

https://jsfiddle.net/w9kgge7b/5/

The same problem happens with BootstrapToggle. It will be interesting to find out the answer as I use Toggle quite often.

Kevin

joeyjojojr

Thanks kthorngren, I have edited my original question with your updated jsfiddle link, but....

Unfortunately I have discovered an even bigger "problem" with the responsive datatable plugin that makes me feel it was never designed to work with editable controls. Regular checkboxes don't hold their value in the responsive plugin as it seems to just hold a copy of what the data was when it was initialized.

If I tick a box that is in the child row and then either resize the window to show the column normally or else collapse and expand the same child row, the checkbox value reverts to its original value. This is the same for all other editable controls such as radio buttons, textboxes, etc.

Unless someone has any other ideas, it looks like editable controls -will not work- with the responsive plugin without some heavy modifications. Thanks anyway.

allan

Response does not use the same nodes that are in the cell - rather it reads the HTML and then create new nodes (i.e. .innerHTML). So yes, you are correct - any events that have been applied to the cell will not be applied to the display in the child row since they are different elements.

I did try implement moving the elements around once, but the performance was shocking. Its something I plan to go back to look at again in future.

In the mean time you could do something like Editor does and have the fields click to edit and then enable the editing aspect at that point.

Allan