Можно ли использовать jQuery, чтобы сделать таблицу панд фильтруемой / доступной для поиска? - PullRequest
Новая
       1

Можно ли использовать jQuery, чтобы сделать таблицу панд фильтруемой / доступной для поиска?

0 голосов
/ 17 января 2019

Я использую Flask для создания веб-приложения, но в настоящее время я застрял, пытаясь создать фильтруемую таблицу (построенную с использованием панд) с окном поиска, в котором можно искать элемент в строке, и таблица будет разрушена, когда элемент найден. Как здесь: 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>

1 Ответ

0 голосов
/ 17 января 2019

Вот рабочая пробная версия для одного подхода: 

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.Однако они должны инициировать AJAX-запрос к конечной точке URL во Flask, которая затем может обновить "results" div.Могут быть более чистые способы сериализации данных, которые будут сохранены в сеансе;это просто для иллюстрации подхода.

Значение по умолчанию session довольно мало во Flask.Если вы попытаетесь сохранить объект, который слишком велик, чтобы уместиться, это не приведет к ошибке, проблема просто игнорируется.Вы захотите использовать flask-session для хранения данных DF;в настоящее время вы отправляете все это в браузер, поэтому я предполагаю, что оно не особенно велико.

Для тех, кто менее знаком с Flask, но работает с Pandas: вы можете запустить этот код и затем перейти к 127.0.0.1:5000 в вашембраузер.Числа 1, 2 или 3 действительны для ввода в поле поиска для взаимодействия с df, все остальное приводит к пустому df.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...