Hidden table responsive bug?
Hidden table responsive bug?
Hello. I have been trying to figure out why when I set the page width small enough to trigger responsive, then refresh the page, it doesn't go responsive. It seems it is caused by me setting the original table to style="display:none"
What are my options to "fix" this? I need to hide the original table to dramatically decrease the page loading times. I also don't want to see the original, even for a split second.
http://live.datatables.net/hafeqapu/1/edit
Load the example, decrease the page width to force responsive, then hit refresh. The refreshed page is not responsive.
Thanks,
Chris
Answers
Hi Chris,
It isn't a bug, but rather happens because the table is initialised when it is hidden. As a result of that the elements inside the hidden container have no height or width and therefore no responsive calculations are possible.
What needs to happen is to call
columns.adjust()
when the table is made visible: http://live.datatables.net/hafeqapu/3/edit .There is a bit of a flicker using this method, which is due to the animation delay. You could call
columns.adjust()
as soon as you call$().show()
, but the way that method works in jQuery is to adjust the width and height, so you get an even worse animation.The best thing to do (imho) is to have the table visible initially, but
opacity: 0
. Then animate the opacity to 1 (assuming you want it to fade in).Allan
Thanks for the reply.
I tried what you suggested with
columns.adjust
and it didn't work at first. Turns out it was because my$('#table').DataTable
had a lower case "D". I wonder how many other things I tried didn't work because of that?It doesn't matter, it works now and I think I'm ok with the tiny delay before it recalculates. Its better than it not working at all.
I did dry what you suggested with the opacity. Perhaps I was doing it wrong but the table took just as long to load with opacity 0 as it does when it's visible.
Hiding the original table takes page load times from over 10 seconds to under 2.
This section of the FAQ should help, it discusses various techniques to improve performance -
deferRender
may also help with that load time.Cheers,
Colin
Thanks. At the moment my data is provided from flask and the table is built using jinja2 templates. Is there a better option then?
Use the
ajax
option to fetch from Flask. Flask will need to fetch the data and return as a JSON format as document in the Ajax docs.Here is a simple example from one of my Flask apps:
Kevin