Menu
I'm using python Flask render_template to return a html page for a route of my python app, and in the html I want to use the bootstrap-table-filter-control as described in the bootstrap example here. However the example given seem to be using a table from a local json file. Here's the code given in the example:
<link href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/[email protected]/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>
How do I replace the
data-url="json/data1.json"
with my own table from my python dataframe passed from the main.py app? I tried the below for my html but it doesn't work:
{% 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 %}
My python route looks like this:
@app.route('/')
def hello():
return render_template('yield.html', tables=[df3.to_html(classes='data', header="true")])
where df3 is the dataframe I want to display as a table in the yield.html with bootstrap filter controls.
204
asked Oct 27 '25 08:10
After some back to basics step-by-step testing, I found my own solution and it's working like a charm now. My yield.html looks like this, with the bootstrap-table filter controls, search, and sorting enabled:
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.16.0/extensions/filter-control/bootstrap-table-filter-control.css">
</head>
<body>
<div class="container">
<table id="table"
data-toggle="table"
data-filter-control="true"
data-show-search-clear-button="true"
data-sortable="true"
classes="table-sm"
data-pagination="true"
data-show-columns="true"
data-show-columns-toggle-all="true"
class="table-responsive">
<thead>
<tr>
<!--special characters and spaces not allowed in data-field name-->
<th data-field="columnA" data-filter-control="input" data-sortable="true">column A</th>
<th data-field="columnB" data-filter-control="select" data-sortable="true">column B</th>
<th data-field="columnC" data-filter-control="input" data-sortable="true">column C</th>
</tr>
</thead>
<tbody>
{% for row in tableA %}
<tr>
<!--special characters and spaces not allowed in data-field name-->
<td>{{ row.columnA }}</td>
<td>{{ row.columnB }}</td>
<td>{{ row.columnC }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/extensions/filter-control/bootstrap-table-filter-control.min.js"></script>
</body>
</html>
Notably, instead of calling an entire table that was made by to_html (dataframe to complete html table with header and row tags included) in the main.py app, I have to specify the table header specifically (within thead tags) with each column's parameters stated clearly, and no spaces and special characters allowed in the data-field name of header, and then to pull in the data rows using the {% for row in tableA %} with the corresponding column names.
In my python app, my data was from a dataframe, which I would need to convert to a python data type, specifically python dictionary that is list like, using data = df.to_dict('records')
And when i render the template, I can pass this dictionary over to the template using return render_template('yield.html', tableA = data)
My python app route looks like this:
@app.route('/')
def hello():
data = df.to_dict('records')
return render_template('yield.html', tableA = data)
A simple example of use bootstrap-table and flask.
Structure:
├── app.py
└── templates
└── table.html
Table.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex">
<title>Bootstrap Table - Flask example </title>
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css">
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
<style type='text/css'>
.row-index {
width: 50px;
display: inline-block;
}
</style>
<script type='text/javascript'>
$(window).load(function(){
var data = {{data|tojson}};
var columns = {{columns|tojson}};
$(function() {
$('#table').bootstrapTable({
data: data,
columns: columns,
});
});
});
</script>
</head>
<body>
<div class="container" style="padding: 10px; ">
<h1>{{title}}</h1>
<br/>
<div id="toolbar"></div>
<table
id="table"
data-toggle="true"
data-toolbar="#toolbar"
data-search="true"
data-show-columns="true"
data-pagination="true"
data-height="500">
</table>
</div>
</body>
</html>
app.py:
from flask import Flask, render_template
import json
"""
A example for creating a Table that is sortable by its header
"""
app = Flask(__name__)
data = [{
"name": "bootstrap-table",
"commits": "10",
"attention": "122",
"uneven": "An extended Bootstrap table"
},
{
"name": "multiple-select",
"commits": "288",
"attention": "20",
"uneven": "A jQuery plugin"
}, {
"name": "Testing",
"commits": "340",
"attention": "20",
"uneven": "For test"
}]
# other column settings -> http://bootstrap-table.wenzhixin.net.cn/documentation/#column-options
columns = [
{
"field": "name", # which is the field's name of data key
"title": "name", # display as the table header's name
"sortable": True,
},
{
"field": "commits",
"title": "commits",
"sortable": True,
},
{
"field": "attention",
"title": "attention",
"sortable": True,
},
{
"field": "uneven",
"title": "uneven",
"sortable": True,
}
]
#jdata=json.dumps(data)
@app.route('/')
def index():
return render_template("table.html",
data=data,
columns=columns,
title='Flask Bootstrap Table')
if __name__ == '__main__':
#print jdata
app.run(debug=True)
Output:
Reference: bambooom
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
