BUG? responsive leaves the icon and style behind

diruggles

I have a wide table. I want to give users the option to disable the responsive view and scroll the page instead of expanding each row.

I'm open to a better way to this, but what I did was:

$(this).dataTable().destroy()
$(this).dataTable({responsive: false})

However when I do this, after the second call that reapplies dataTable, the green plus icon is still over the first column and the cursor is the hand when over the first column just as it is when responsive is applied. If you click nothing happens and the table looks and acts as expected without responsive functionality.

I have duplicated this issue manually in the browser's javascript console, so it doesn't appear to be a timing issue.

So first, I'm assuming this is a bug and wish to report it.
Second, is there a better way to accomplish the goal of toggling responsive?

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

diruggles

I apologize!!!

Here is a example: https://www.safedatausa.com/test.html

To duplicate the problem, shrink the browser window until responsive kicks in then click the "test" button.

diruggles

In building my example I ended up digging into the problem further. It appears that the issue is the class "collapsed" being left on the table tag.

In my original code, I remove the class collapsed between the destroy and then applying DataTable again and that works for me.

colin

Thanks for that test case, that helped understand it, and yep, I agree, that looks a bit wobbly. This was actually reported before (DD-887 for my reference), I only just found it, so apologies for making you jump through hoops.

I've added this thread to the case, and we'll report back here when there's an update.

Cheers,

Colin