堆栈内存溢出
  繁体   English   中英

表已呈现，但 dataTables 不会修改 Flask 中现有的 HTML 表

[英]Table is rendered but dataTables will not modify existing HTML table in Flask

 原文  2022-03-08 21:28:28  9   1    flask/ datatables

问题描述

下面我提供了我的 Flask 应用程序的最小工作示例，该应用程序使用 dataTable.JS 修改现有的 HTML 表。 在与当前在线示例进行交叉比较时，我认为这是由于未正确加载所需的库和/或找不到数据。

非常感谢指导！

HTML (base.html) 

 <,DOCTYPE html> <html> <head> <link rel="stylesheet" href="{{ url_for('static'. filename='css/main:css') }}"> <link rel="stylesheet" type="text/css" href="https.//cdn.datatables.net/v/dt/dt-1.11.5/af-2.3.7/b-2.2.2/fc-4.0.2/fh-3.2.2/sc-2.0.5/sl-1.3.4/datatables.min,css"/> </head> <body> <header> <div class="container"> <h1 class="logo"></h1> <strong><nav> <ul class="menu"> <li><a href="{{ url_for('home') }}">Home</a></li> <li><a href="{{ url_for('map') }}">Entity Map</a></li> </ul> </nav></strong> <div class = "logoimg"> <img src="{{ url_for('static'.filename='images/GENERIC_PDE_PageCard:png') }}" width="10%"> </div> </div> </header> <div class="container"> {% block content %} {% endblock %} </div> <script type="text/javascript" charset="utf8" src="https.//code.jquery.com/jquery-3.5.1:js"></script> <script type="text/javascript" src="https.//cdn.datatables.net/v/dt/dt-1.11.5/af-2.3.7/b-2.2.2/fc-4.0.2/fh-3.2.2/sc-2.0.5/sl-1.3.4/datatables.min.js"></script> {% block scripts %}{% endblock %} </body> </html>

HTML(home.html) 

 {% extends "base.html" %} {% block content %} <div class = "home"> <h3>OCFY Entity Database</h3> <h4>Purpose</h4> <p>Purpose This application is designed for performing custom queries to a database containing information about private and non-public entities who are serving school-aged children and youth in the Commonwealth of Pennsylvania. Sites in this database include private or non-public licensed schools, as well as non-public entities such as residential and juvenile justice institutions.</p> <h4>How to Search</h4> <p>The database provides information at the site-level, as well as by several higher-order aggregates, including region, county, city, type of service, PDE Educational Entity and DHS Entity. Use the drop-down filters within to perform a custom query that automatically displays in the table on the next tab. Selecting one or more values fromm the filters will automatically remove irrelevant values from the rest of the filters. You can also use the filters in any order. They will still show only relevant options. The search function at the top right of the table accepts words and/or whole numbers. The search function looks across all columns for all entities in the database and displays every entity with a column containing the number and/or word that was typed. Use the first drop down box to select multiple fields from the database. Your choices will be displayed automatically in the table. The application defaults to showing several key fields. Use backspace within the search box to remove fields from the table.</p> </div> <br> <div class = "homecontent"> <div class = "sidebar"> <h4>Select Fields from Database</h4> </div> <div class = "tablecontainer"> <table id="entity_table" class="table table-striped"> <tr> <th>DHS Entity Name</th> <th>DHS Legal Name</th> <th>Full Address</th> </tr> <tr> <td>Test1</td> <td>Test2</td> <td>Test3</td> </tr> <tr> <td>Test1</td> <td>Test2</td> <td>Test3</td> </tr> <tr> <td>Test1</td> <td>Test2</td> <td>Test3</td> </tr> </table> </div> </div> {% endblock %} {% block scripts %} <script> $(document).ready(function () { $('#entity_table').dataTable(); }); </script> {% endblock %}

CSS (main.css) 

 body { margin: 0; padding: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #444; } /* * Formatting the header area */ header { box-shadow: 3px 5px 3px #d0d1d3; /* offset x, offset y, blur radius */ background-color: #002060; height: 90px; width: 100%; opacity: .9; margin-bottom: 5px; } div.container { scroll-behavior: auto; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; } div.logoimg{ display: flex; justify-content: left; align-items: center; } /* * Formatting the container contents */.container { width: 1200px; margin: 0 auto; } div.homecontent{ width: 1200px; } div.tablecontainer { float: right; width: 850px; background-color: #ffffff; } div.sidebar { float: left; box-shadow: 3px 5px 3px #d0d1d3; text-align: center; width: 300px; height: 500px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; background-color: #F3F4F5; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } div.home { box-shadow: 3px 5px 3px #d0d1d3; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; background-color: #F3F4F5; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } div.map { padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; background-color: #F3F4F5; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } h2 { font-size: 3em; margin-top: 40px; text-align: center; letter-spacing: -2px; } h3 { font-size: 1.7em; font-weight: 100; margin-top: 30px; text-align: center; letter-spacing: -1px; color: #999; }.menu { float: right; margin-top: 8px; }.menu li { display: inline; }.menu li + li { margin-left: 35px; }.menu li a { color: #fff; text-decoration: none; }

应用程序： 

 from flask import Flask, render_template ocyf = Flask(__name__) @ocyf.route('/') def home(): return render_template("home.html") @ocyf.route('/map/') def map(): return render_template("map.html") if __name__ == '__main__': ocyf.run(debug=True)

1 个解决方案

解决方案1
 0  2022-08-26 18:05:00

你必须在你的桌子上使用 thead 和 tbody 标签。

<table id="entity_table" class="table table-striped">
    <thead>
        <tr>
            <th>DHS Entity Name</th>
            <th>DHS Legal Name</th>
            <th>Full Address</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Test1</td>
            <td>Test2</td>
            <td>Test3</td>
        </tr>
        <tr>
            <td>Test1</td>
            <td>Test2</td>
            <td>Test3</td>
        </tr>
        <tr>
            <td>Test1</td>
            <td>Test2</td>
            <td>Test3</td>
        </tr>
    </tbody>
</table>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 操作 HTML 表，从 Flask 渲染，在 Javascript 使用 JavaScript 在 HTML 中对 Python/Flask 中动态呈现的表格进行排序 如何在 flask 中使用 for 循环自动刷新 html 表字段？ 使用数据表jQuery的烧瓶表搜索 如何将熊猫数据框显示到现有的烧瓶 html 表中？ Flask/datatables.js - 向表格添加按钮？ 数据表！ 使用Flask创建动态表时无法应用数据表 如何通过基于使用 Flask 的搜索查询现有 SQLite 表来填充 HTML 表？ 未呈现烧瓶HTML电子邮件 带AJAX的烧瓶-更新HTML表格
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM