Flask模板和数据表 - 响应式表加载不正确

-2

我正在使用Flask构建Web应用程序。我有base.html这是与navbar和其他一些事情的父模板，然后从侧边栏加载每个页面使用扩展模板。当我将数据表放置在子模板中时，表无法正确加载。我没有得到显示多少实体的下拉菜单，没有搜索功能等等......我在这里做错了什么？Flask模板和数据表 - 响应式表加载不正确

base.html文件

<!DOCTYPE html> 
<html> 
    <head> 

    <!-- Bootstrap Core CSS --> 
    <link href="static/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> 

    <!-- MetisMenu CSS --> 
    <link href="static/metisMenu/dist/metisMenu.min.css" rel="stylesheet"> 

    <!-- Timeline CSS --> 
    <link href="static/css/timeline.css" rel="stylesheet"> 

    <!-- Custom CSS --> 
    <link href="static/css/sb-admin-2.css" rel="stylesheet"> 

    <!-- Morris Charts CSS --> 
    <link href="static/morrisjs/morris.css" rel="stylesheet"> 

    <!-- Custom Fonts --> 
    <link href="static/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> 

    <!-- DataTables CSS --> 
    <link href="static/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css" rel="stylesheet"> 

    <!-- DataTables Responsive CSS --> 
    <link href="static/datatables-responsive/css/dataTables.responsive.css" rel="stylesheet"> 


    </head> 
    <body> 

<----- BODY STUFF -----> 
{% block content %} {% endblock %} 

    <!-- jQuery --> 
    <script src="{{ url_for('static', filename='jquery/dist/jquery.min.js') }}"></script> 

    <!-- Bootstrap Core JavaScript --> 
    <script src="{{ url_for('static', filename='bootstrap/dist/js/bootstrap.min.js') }}"></script> 

    <!-- Metis Menu Plugin JavaScript --> 
    <script src="{{ url_for('static', filename='metisMenu/dist/metisMenu.min.js') }}"></script> 

    <!-- Morris Charts JavaScript --> 
    <script src="{{ url_for('static', filename='raphael/raphael-min.js') }}"></script> 
    <script src="{{ url_for('static', filename='morrisjs/morris.min.js') }}"></script> 
    <script src="{{ url_for('static', filename='morris-data.js') }}"></script> 

    <!-- Custom Theme JavaScript --> 
    <script src="{{ url_for('static', filename='js/sb-admin-2.js') }}"></script> 

    </body> 
</html>

SETUP.HTML

{% extends "base.html"%} 
{% block content %} 

    <h1>Admin page</h1><hr> 

    {% if devices %} 
    <div class="row"> 
       <div class="col-lg-12"> 
        <div class="panel panel-default"> 
         <div class="panel-heading"> 
          Devices 
         </div> 
         <!-- /.panel-heading --> 
         <div class="panel-body"> 
          <div class="dataTable_wrapper"> 
           <table class="table table-striped table-bordered table-hover" id="dataTables-example"> 
            <thead> 
             <tr> 
              <th>Device</th> 
              <th>Type</th> 
              <th>Location</th> 
             </tr> 
            </thead> 
            <tbody> 
             {% for device in devices %} 
             <tr class="odd gradeX"> 
              <td>{{device.name}}</td> 
              <td>{{device.type.name}}</td> 
              <td>{{device.location.name}}</td> 
             </tr> 
             {% endfor %} 
            </tbody> 
           </table> 
            <p><a href="{{ url_for('editDevices') }}"> Edit Devices </a></p> 
          </div> 
          <!-- /.table-responsive --> 

         </div> 
         <!-- /.panel-body --> 
        </div> 
        <!-- /.panel --> 
       </div> 
       <!-- /.col-lg-12 --> 
      </div> 
    {% endif %} 


    <!-- DataTables JavaScript --> 
    <script src="{{ url_for('static', filename='datatables/media/js/jquery.dataTables.min.js') }}"></script> 
    <script src="{{ url_for('static', filename='datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.min.js') }}"></script> 


<script> 
    $(function() { 
    $("#example1").DataTable(); 
    $('#dataTables-example').DataTable({ 
     "paging": true, 
     "lengthChange": false, 
     "searching": false, 
     "ordering": true, 
     "info": true, 
     "autoWidth": false 
    }); 
    }); 
</script> 

{% endblock %}

来源

2015-11-05 user3525053

请[edit]包含[mcve]。 *最小* – davidism

看起来像你没有块放入基础模板。

将<----- BODY STUFF ----->替换为{% block content %}{% endblock %}！

来源

2015-11-05 20:16:25

啊，看起来我只是忘了把它放在代码框中。但{％block content％}在主体中。 – user3525053

Flask模板和数据表 - 响应式表加载不正确

回答

相关问题