我会尽力帮助您翻译中文内容,以下是所需翻译的内容:
我正在使用python Flask的render_template方法为我的python应用程序的路由返回一个html页面,在该html页面中,我想使用bootstrap-table-filter-control功能,就像bootstrap的这个示例中描述的那样。然而,该示例似乎使用了来自本地json文件的表格。以下是该示例中给出的代码:
<link href="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.16.0/dist/extensions/filter-control/bootstrap-table-filter-control.min.js"></script>
<table
id="table"
data-url="json/data1.json" ## this looks like the code to get the table's data
data-filter-control="true"
data-show-search-clear-button="true">
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="name" data-filter-control="input">Item Name</th>
<th data-field="price" data-filter-control="select">Item Price</th>
</tr>
</thead>
</table>
<script>
$(function() {
$('#table').bootstrapTable()
})
</script>
我该如何用我的Python数据框架替换主程序main.py传递的表格中的
data-url="json/data1.json"
?我尝试使用以下 HTML 代码进行替换,但未成功:
{% for table in tables %}
<table id="table"
data = {{ table|safe }}
data-filter-control="true"
data-show-search-clear-button="true"
class="table-striped">
<thead>
<tr>
<th data-field="columnA" data-filter-control="input">column A</th>
<th data-field="columnB" data-filter-control="select">columnB</th>
<th data-field="columnC" data-filter-control="select">columnC</th>
</tr>
</thead>
<tbody>
<!-- I have tried to put {{ table|safe }} here but doesn't work -->
</tbody>
</table>
{% endfor %}
我的Python路由看起来像这样:
@app.route('/')
def hello():
return render_template('yield.html', tables=[df3.to_html(classes='data', header="true")])
其中df3是我想在yield.html中用bootstrap筛选控件显示为表格的数据框。