0
htmlテーブルを表示し、テーブルを動的にフィルタリングするjinja2テンプレートをレンダリングしようとしていますが、正しく動作させることができません。テーブルは期待どおりレンダリングされますが、テーブルを動的にフィルタリングするために使用される検索ボックスは機能しません。参考までに、layout.htmlのスクリプトは非フラスコアプリで動作します。ここ Filter FlaskレンダリングされたHTMLテーブルjQueryを使用して
は私フラスコアプリ（message_log.py）である：
import pandas as pd
from flask import Flask, render_template
pd.set_option('display.max_colwidth', -1)
app = Flask(__name__)
message_log = pd.read_csv('data.csv')
table = message_log.to_html().replace('<tbody', '<tbody id="fbody"')
@app.route("/")
def show_table():
return render_template('index.html', table=table)
if __name__ == "__main__":
app.run(debug=True)
のindex.html：
{% extends "layout.html" %}
{% block body %}
Search (Case Sensitive): <input type="text" id="search" placeholder="type to search"/>
{{ table|safe }}
{% endblock %}
layout.html：
<!doctype html>
<html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
// Search functionality
$("#search").keyup(function() {
//split the current value of searchInput
var data = this.value.split(" ");
//create a jquery object of the rows
var jo = $("#fbody").find("tr");
if (this.value == "") {
jo.show();
return;
}
//hide all the rows
jo.hide();
//Recusively filter the jquery object to get results.
jo.filter(function (i, v) {
var $t = $(this);
for (var d = 0; d < data.length; ++d) {
if ($t.is(":contains('" + data[d] + "')")) {
return true;
}
}
return false;
})
//show the rows that match.
.show();
}).focus(function() {
this.value = "";
$(this).css({
"color": "black"
});
$(this).unbind('focus');
}).css({
"color": "#C0C0C0"
});
</script>
<title>jQuery Example</title>
</head>
<body>
{% block body %}{% endblock %}
</body>
</html>