Answers

• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  October 2021

  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 Posts: 34Questions: 10Answers: 1

  October 2021

  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 Posts: 15,177Questions: 1Answers: 2,590

  October 2021

  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 Posts: 34Questions: 10Answers: 1

  October 2021

  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 Posts: 20,425Questions: 26Answers: 4,794

  October 2021

  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