Question

我正在使用Flask构建一个Web应用程序，但是我目前正试图用搜索框创建一个可过滤的表格（使用熊猫构建），您可以在其中连续搜索一个项目，并且当该项目出现时表格会折叠被发现。就像这里的一个：https://www.w3schools.com/bootstrap/bootstrap_filters.asp

在上面的示例中，jQuery过滤器功能应用于直接在html模板中创建的表，但是我很难让它与pandas数据框一起使用（当我尝试通过搜索框进行搜索时，什么都没有发生）

任何帮助将不胜感激：）

我的run.py如下：

from flask import Flask, render_template
import pandas as pd
app = Flask(__name__)

@app.route("/")
def table():
    df = pd.read_csv("input.csv")
    return render_template("test.html", data=df.to_html(index=False))

if __name__ == '__main__':
    app.run(debug=True)

还有我的测试html模板：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $({{data}}).filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>
</head>
<body>
    <div class="container">
      <h2>Browse Phosphosites</h2>
      <br><br>
      <p>Search the table for selected phosphosites or associated genes, chromosome locations and sequences:</p>  
      <input id="myInput" type="text" placeholder="Search...">
      <br><br>
      {{data | safe }}
    </div>
</body>
</html>

Answer 1

这是一种可行的试验方法：

from flask import Flask, render_template_string, session, request

import pandas as pd
app = Flask(__name__)

template = """
<!doctype html>
<input type="text" value="" name="my_filter" id="my_filter">

<div id="results">{{ data|safe }}</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript">
   $('#my_filter').keyup(function() {
       if ($(this).val().length >= 1) {
           var requested_code = document.getElementById('my_filter').value;

           $.ajax({
               type: 'POST',
               data: JSON.stringify({
                   'requested_code': requested_code
               }),
               contentType: 'application/json; charset=utf-8',
               url: "{{ url_for('filter_html') }}",
               success: function(resp) {
                   $("#results").html(resp);
               }
           });

       }
});
</script>
</html>
"""

@app.route("/")
def table():
    df = pd.DataFrame({'a': [1, 2, 3], 'b': [4, 5, 6]})
    session['df'] = df.values.tolist()
    return render_template_string(template, data=df.to_html(index=False))


@app.route('/filter', methods=['GET', 'POST'])
def filter_html():
    df = pd.DataFrame(session['df'], columns=['a', 'b'])
    df = df[df['a'] == int(request.json.get('requested_code'))]
    return df.to_html(index=False)


if __name__ == '__main__':
    app.secret_key = 'hello'
    app.run(debug=True)

本质上，将JQuery函数添加到input事件的keyup框中。但是，这些应该触发对Flask中URL端点的AJAX请求，然后可以更新"results" div。可能会有更干净的方法来序列化要存储在会话中的数据；这只是为了说明一种方法。

在Flask中，默认的session很小。如果您尝试存储太大而无法容纳的对象，则不会出错，该问题只会被忽略。您将要使用flask-session来存储DF数据；您当前正在将整个内容发送到浏览器，因此我认为它不是特别大。

对于不熟悉Flask但与Pandas合作的任何人：您可以运行此代码，然后在浏览器中导航到127.0.0.1:5000。数字1、2或3可以有效地输入搜索框以与df进行交互，其他任何情况都会导致df为空。

是否可以使用jQuery使熊猫表可过滤/可搜索？

1 个答案: