Bootstrap & DataTables: Table is rendered twice

Bootstrap & DataTables: Table is rendered twice

rsprsp Posts: 8Questions: 1Answers: 0
edited August 2017 in Free community support

The problem (with simple project files) is described in the following Link

When using Flask+Bootstrap the table is being rendered twice. The first time just as HTML table and the second time as a table with DataTable format (script executed).

Could anyone help to get the correct Datatable being rendered just once (w. Bootstrap) ?

Thanks in advance!

PS,
Im using:
Flask 0.12
Python 3.4.2
Bootstrap 3.3.7
JQuery 1.12.4

Answers

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    It looks like you are populating the data directly into HTML then initializing your Datatable. The events template is downloading the Datatables JS and CSS files then initializing Datatables.

    I'm not terribly familiar with Flask but I would guess the problem is due to delays loading the Datatables include files via CDN. Based on your description I would guess that the HTML table is loaded and displayed then the DT files are downloaded from the CDN then DT is initialized.

    I would start by monitoring the browsers network tab in the dev tools to see how long each step takes. If you find the problem is using the CDN to load DT then save and load them locally.

    Otherwise is it possible to provide a link to your page for troubleshooting?

    Kevin

  • rsprsp Posts: 8Questions: 1Answers: 0

    This is a small project I do not have any connection to outside by now.

    But thank you! I am monitoring with the browser and see that bootstrap and jquery are loaded via network... you mean should I try with these files in static directory instead?

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    you mean should I try with these files in static directory instead?

    If it seems that is delaying your page then yes.

    If you populate the HTML table it will display until Datatables is initialized. Then you will see the re-styled Datatable. Which may cause it to look like its being drawn twice.

    Kevin

  • rsprsp Posts: 8Questions: 1Answers: 0

    hmm.. when I try to use the DataTable static files then the table is rendered as a HTML table... Only if I use no Bootstrap and CDN files loading the DataTable is rendered correctly... strange

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    Since you are unable to provide a link to your page maybe you can provide a test case with the generated HTML. Go here:
    http://live.datatables.net/

    Remove everything from HTML, Javascript and CSS sections and paste your generated HTML into the HTML section. The page may or may not work but at least we can take a look at your code as generated. Just post back with the link to your test case.

    But thank you! I am monitoring with the browser and see that bootstrap and jquery are loaded via network... you mean should I try with these files in static directory instead?

    Sorry, I misread this question. I meant loading the Datatables CSS and JS files locally.

    How long does it take to download the Datatables files when you load your page?

    Kevin

  • rsprsp Posts: 8Questions: 1Answers: 0

    Ohh, the idea with the live datatables was really good!

    please add following line (from Bootstrap CDN) into the HTML head:

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    Now when you run the example by clicking on "Run with JS" button you will see first the HTML table and then the DataTable,

    This effect does not happens if the Bootstrap is not used.

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    Do you have a link to the test case :smile:

    Kevin

  • rsprsp Posts: 8Questions: 1Answers: 0
    edited August 2017

    here linkToTestCase

    I dont think it is persistent ...

    Anyway its very simple to reproduce , just add the Bootstrap CDN link into the HTML head live DataTables link.

    Could you reproduce it too?

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    I dont think it is persistent ...

    Your changes are automatically saved. You will notice the URL changes.

    Could you reproduce it too?

    Your test case is not using Bootstrap but just loading the Bootstrap CSS. I can see a flash of the HTML table followed by the Datatable display whether loading the Bootstrap CSS or not. Both cases look the same to me.

    What are the results of monitoring the network tab of browser when loading your page?

    If there is 1 second where you see the HTML table then the Datatable then it would seem the delay is likely due to loading CSS and/or JS via the internet. Could be something else though.

    However you could try hiding the HTML table until the Datatable init is complete then display the table. I updated your example with code to do this:
    http://live.datatables.net/mixozala/1/edit

    Kevin

  • rsprsp Posts: 8Questions: 1Answers: 0

    Hi,
    thank you I will test it and tell you about network times. Ill be out for a week now.

  • rsprsp Posts: 8Questions: 1Answers: 0

    Hi,

    here again :-)

    sorry, Its a little bit better but I still see first the plain table and later the DataTable. The network monitoring when I call the page in live datatables.net looks like (example you gave me) :

    And this is the network monitoring when I call the page on my server:

    One thing I forgot to mention is that my server is running on a raspberry Pi 3

  • rsprsp Posts: 8Questions: 1Answers: 0

    Hello,

    I am using now another approach. I pass the table as sourced data (array) and the table is correctly rendered only once.

    I do not know why the other way is rendered two times but with this new approach I get what I wanted !

    Thank you very much for your support !

    PS: If you find a solution for the first approach I would like to know it anyway.

This discussion has been closed.