Question

我正在尝试渲染一个显示html表格的jinja2模板，然后动态过滤表格，但我无法让它正常工作。该表按预期呈现，但用于动态过滤表的搜索框不起作用。作为参考，layout.html中的脚本适用于非烧瓶应用程序。

这是我的烧瓶应用程序（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>

Answer 1

在html标记关闭之前，将第二个元素移动到index.html文件的底部。脚本中的jquery正在搜索一个在加载时没有注入dom的元素。

使用jQuery过滤Flask呈现的HTML表

1 个答案: