Hidden table responsive bug?

Chris230291

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

allan

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

Chris230291

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.

colin

This section of the FAQ should help, it discusses various techniques to improve performance - deferRender may also help with that load time.

Cheers,

Colin

Chris230291

Thanks. At the moment my data is provided from flask and the table is built using jinja2 templates. Is there a better option then?

kthorngren

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:

@api.route("/all")
class stats_timestamp(Resource):
    @login_required
    def get(self):
        """
        Returns all stats.
        """
        return jsonify(get_all_sql())

Kevin