Twitter bootstrap Bootstrap&；DataTables：表被呈现两次

请阅读下面的“更新：2017-8-23（20Hs）”，我在用烧瓶进行实验时发现了这种效果，但它似乎只与数据表和引导相关。

实现了一个Flask应用程序，我通过直接从CSV文件读取数据的方式呈现了一个表，这没有问题

然后，我决定在实现数据库时使用滚动条/搜索/排序等功能，然后使用其他更高级的功能

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

我的_uuu _uuu.py（我在其中呈现我的事件表）如下所示：

# file: __init__.py 
import pandas as pd

from flask import Flask, render_template
from 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')

{% 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 %}

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

我的events.html模板如下所示：

# file: __init__.py 
import pandas as pd

from flask import Flask, render_template
from 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')

{% 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 %}

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

现在，当呈现事件页面时，我很快就会看到原始表（没有DataTable），一秒钟后，我再次看到以DataTable格式呈现的表

谁能解释一下我做错了什么

我是否应该使用DataTable建议的JavaScript源数据

我使用的是Flask和Flask的引导，Flask使用jQuery版本1.12.4

非常感谢您的帮助

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

更新：2017年8月22日

使用引导时会出现这种效果。未使用引导时（表示：否 “扩展events.html中的”bootstrap/base.html“，并设置相应的数据表（不带引导），然后页面只更新一次，数据表正确呈现

我看到了另一个链接，比如（引导问题），JS popover的函数被调用了两次，我怀疑这是否是一个类似的问题

我还用最少的代码更新了文件（见上文init.py和events.html），以再现效果

我也在DataTables论坛上发布了一个问题（）

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

更新：2017-8-23（20小时）

多亏了DataTables论坛的人们，通过live DataTables（），这种效果可以在没有任何flask或python文件的情况下复制

转到此链接并添加以下行（从）

进入HTML头部：

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

现在，当您通过单击“RunwithJS”按钮运行示例时，您将首先看到HTML表，然后是DataTable

Im使用DataTable 1.10.15、Bootstrap 3.3.7和JQuery 1.12.4

如果不使用引导，则不会发生此效果

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

更新：2017年9月10日

对我来说，是通过使用一种新的方法来解决问题的。请阅读我在2017年9月10日的帖子

现在，在呈现事件页面时，我很快就会看到原始表（不使用DataTable脚本），然后正确呈现DataTable

当我在上面评论时，我误解了这一点。这似乎也不是什么大问题

我拼凑了一个测试用例来说明一种理论，即认为页面已经准备好，有什么东西在拖延

jQuery

，从而将

.DataFrame（）

的调用延迟到页面呈现之后。这就是你所看到的效果。（我假设您正在从覆盖的页面拉入

jQuery

）

您没有显示拉入

jQuery

的fragement，看起来您正在使用引导。你在拉其他的JS吗？你能发那段代码吗

---

查看DataTable文档，唯一跳出来的是它们推荐的路径与您正在使用的路径不同（我正在查看的文档没有

v/bs/dt-

部分）。我在两者之间切换得到的结果略有不同。

我现在使用另一种方法。我将表作为源数据（数组）传递到DataTables中，HTML表只正确呈现一次

    @app.route('/')
    @app.route('/events')
    def events():
        with open("event.csv",'r') as dest_f:
            data_iter = csv.reader(dest_f, delimiter = ',')
            data = [data for data in data_iter]
        return render_template('events.html', page='events', html_table=data)

我不知道为什么另一种方式会被渲染两次，但通过这种新方法，我得到了我想要的

    <script>

        var dataSet = {{ html_table | safe }}

        $(document).ready(function(){
            if ( !$.fn.dataTable.isDataTable( '#myTable' ) ) {
                var table = $('#myTable').DataTable( {
                    "data" : dataSet,
                });
            }

        });

    </script>


...

    <table id="myTable" class="display nowrap dataframe" width="100%">
    </table>

var数据集={html_table | safe}
$（文档）.ready（函数（）{
if（！$.fn.dataTable.isDataTable（'#myTable'））{
变量表=$（'#myTable'）。数据表（{
“数据”：数据集，
});
}
});
...

它对我不起作用。我删除所有元素并重新创建

  $('.table-responsive').html('<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0"></table>')
  $(document).ready(function() {  
    $('#dataTable').DataTable( {
        ajax: '/admin/users',
        columns: <%= raw @users_attrs.to_json %>
      });
  });

$（'.table responsive'）.html（''）
$（文档）.ready（函数（）{
$（'#dataTable'）。dataTable（{
ajax:“/admin/users”，
柱：
});
});

我也有同样的问题。我找不到合适的解决办法。因此，我将DOM操作作为一种技巧来解决这个问题

以下是我的表格：

在开始时通过DOM操作将表隐藏在视图中：

然后，在呈现表格时，显示表格：

---

在您的位置上，我会在Python REPL上运行前三行

events（）

（当然是在导入之后），以验证

html\u表

是否符合您的期望。谢谢您，Dave，但是三行events（）似乎工作正常，事实上html\u表已正确呈现（一次）当我不使用DataTable脚本时。谢谢你的建议，我正在做其他事情，但似乎不是问题所在。我已经更新了上面的描述与整个文件复制的效果。对于这些文件，我只提取DataTable使用的htm_表。是的，我正在使用引导。我希望你现在就可以复制这个效果。如果没有你所有的源代码（还有更多的时间，我现在没有），我现在能提供的最好的方法就是调试策略。我处理这样一个问题的两种方法是要么从小处着手，逐步建立足够的HTML，直到我能够演示这个问题为止。然后，更可能的是，它与我做的最后一件事有关。或者，从大的开始减去。在浏览器中调出页面，将其另存为本地文件，然后加载该文件。然后一步一步地移除东西，直到问题消失。我先把布斯特拿出来