Bootstrap & DataTables: Table is rendered twice -

please read below "update: 2017-aug-23 (20hs)", discovered effect experimenting flask seems related between datatables , bootstrap.

implementing flask application have rendered table reading data means of pandas directly csv file, no problem.

then decided use datatables in order make of features scroll-bar/search/ordering first , later other more advanced features when implementing database.

# file structure # # /testapp #   +--- /app #   |     +------ /templates #   |     |           +------ events.html #   |     +------ __init__.py #   |     | #   |     +------ events.csv #   |      #   +---- run.py # 

my __ init __ .py (where render events table) looks like:

# file: __init__.py  import pandas pd  flask import flask, render_template flask_bootstrap import bootstrap  app = flask(__name__, static_path = '/static', static_url_path = '/static')  bootstrap = bootstrap(app)  @app.route('/') @app.route('/events') def events():     return render_template('events.html', page='events') 

and events.html template looks like:

{% extends "bootstrap/base.html" %} {% block content %}  {% block scripts %}     {{ super() }}     <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/dt-1.10.15/datatables.min.css"/>     <script type="text/javascript" src="https://cdn.datatables.net/v/bs/dt-1.10.15/datatables.min.js"></script>      <script>         $(document).ready(function(){             if ( !$.fn.datatable.isdatatable( '#mytable' ) ) {                 $('#mytable').datatable( {                     scrolly: 270,                     paging: false                 } );             }         });     </script> {% endblock scripts %}  <div class="bootstrap-iso">     <div class="container-fluid">             <table border="1" class="dataframe " id="mytable">       <thead>         <tr style="text-align: right;">           <th></th>           <th>event</th>           <th>next shutdown</th>           <th>next startup</th>         </tr>       </thead>       <tbody>         <tr>           <th>1</th>           <td>2017-08-20 15:06:18</td>           <td>2017-08-20 16:06:00</td>           <td>2017-08-21 07:30:00</td>         </tr>         <tr>           <th>2</th>           <td>2017-08-20 12:26:26</td>           <td>2017-08-20 13:26:00</td>           <td>2017-08-21 07:30:00</td>         </tr>       </tbody>     </table>     </div> </div>  {% endblock %} 

run.py file looks like:

from app import app app.run(host='0.0.0.0', debug=false) 

now when rendering events page see shortly original table (without datatable) , 1 second later see table rendered again in datatable format.

could explain me doing wrong here?

should use javascript sourced data proposed here datatable?

i using flask , bootstrap flask uses jquery version v1.12.4.

thank in advance helping!

==============================

update: 2017-aug-22

this effect occurs when using bootstrap. when no bootstrap used (means: no "extends "bootstrap/base.html"" in events.html , set corresponding datatables no bootstrap) page updated once , datatables rendered correctly.

i saw other link this (bootstrap issue) js popover's function called twice , i'm questioning if similar problem...

i have updated files (see above init.py , events.html) minimum of code reproduces effect.

i have posted question in datatables discussion forum (link)

==============================

update: 2017-aug-23 (20hs)

thanks people in datatables forum effect can reproduced without flask or python files means of live datatables (link) !

go link , add following line (from bootstrap cdn)

into 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 run example clicking on "run js" button see first html table , datatable,

im using datatable 1.10.15, bootstrap 3.3.7 , jquery 1.12.4

this effect not happens if bootstrap not used.

==============================

update: 2017-sep-10

for me issued closed using new approach. read post @ 2017-sep-10 below.

now when rendering events page see shortly original table (without use of datatable script) , datatable correctly rendered.

i misread when commented above. doesn't appear either pandas of flask issue.

i threw test case poke @ theory stalling jquery thinking page ready, delaying invocation of .dataframe() until after page had rendered. case effect you're seeing. (i assume you're pulling in jquery page you're overriding.)

you don't show fragement pulls in jquery, , looks you're using bootstrap. pulling in other js? can post bit of code?

looking @ datatable docs, thing jumped out paths recommend different ones you're using (the doc i'm looking @ doesn't have v/bs/dt- part). different result switching between two.