0
540
VisualizaçõesFiltrar con opciones desplegables en la aplicación Python Flask (con JavaScript)
Estoy tratando de usar menús desplegables para filtrar los resultados en una tabla. He intentado que funcione con addEventListener('click'), pero no sé cómo hacerlo completamente funcional. Creo que estoy muy cerca pero me falta algo.
¿Alguien podría ayudar a proporcionar una solución de modo que cuando se haga clic en los valores de los países en el menú desplegable, se filtren todos aquellos con valores de países correspondientes en la tabla? Esto deberá funcionar de tal manera que se utilicen múltiples menús desplegables en múltiples columnas.
Pitón
app = Flask(__name__) test_data = [['jack', 23, 'china', 'https://www.google.com'], ['jill', 22, 'canada', 'https://www.cnn.com'], ['john', 24, 'canada', 'https://www.cnn.com'], ['jane', 30, 'australia', 'https://www.bbc.com']] test_df = pd.DataFrame(test_data, columns=['name', 'age', 'country', 'link']) test_df = test_df.to_dict(orient='index') @app.route("/hello") def index(): return render_template("index.html", test_df=test_df)HTML : en un index.html
<div class="container"> <label for="country">Countries</label> <form class="form"> <div class="form__group"> <select id="country" name="country" data-dropdown> <option value="">Please select a country</option> <option value="australia">Australia</option> <option value="canada">Canada</option> <option value="china">China</option> </select> </div> </form> </div> <table class="table"> <tbody id="myTable"> </tbody> </table>JavaScript : dentro de index.html en etiquetas de script
var mydata = JSON.parse('{{ test_df|tojson }}'); var countrySelector = document.getElementById('country'); // but what next? buildTable(mydata) function buildTable(data) { var table = document.getElementById('myTable') table.innerHTML = '' for (var key in data) { var row = `<tr> <td>${data[key].name}</td> <td>${data[key].age}</td> <td><a href="${data[key].link}" target='_blank'>${data[key].country}</a></td> </tr>` table.innerHTML += row } }1 Respostas
Responde à pergunta0
Use el evento de cambio del elemento seleccionado para monitorear los cambios del usuario en la selección.
El siguiente ejemplo le muestra cómo filtrar las filas por país. Para que sea más fácil filtrar las filas en JavaScript, no se pasan como un dictado sino como una lista usando df.values.tolist() .
from flask import ( Flask, render_template ) import pandas as pd @app.route('/') def index(): test_df = pd.DataFrame( [ ['jack', 23, 'china', 'https://www.google.com'], ['jill', 22, 'canada', 'https://www.cnn.com'], ['john', 24, 'canada', 'https://www.cnn.com'], ['jane', 30, 'australia', 'https://www.bbc.com'] ], columns=['name', 'age', 'country', 'link'] ) return render_template('index.html', test_df=test_df.values.tolist()) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Index</title> </head> <body> <div class="container"> <label for="country">Countries</label> <form class="form"> <div class="form__group"> <select id="country" name="country" data-dropdown> <option value>Please select a country</option> <option value="australia">Australia</option> <option value="canada">Canada</option> <option value="china">China</option> </select> </div> </form> </div> <table class="table"> <tbody id="myTable"> </tbody> </table> <script type="text/javascript"> function buildTable(data) { const table = document.getElementById('myTable') table.innerHTML = data.map(row => { let [name, age, country, link] = row; return `<tr> <td>${name}</td> <td>${age}</td> <td><a href="${link}" target='_blank'>${country}</a></td> </tr>`; }).join(''); } const data = {{ test_df|tojson }}; const countrySelector = document.getElementById('country'); countrySelector.addEventListener('change', evt => { const value = evt.target.value; if (value) { buildTable(data.filter(row => { let [name, age, country, link] = row; return country === value })); } else { buildTable(data); } }); buildTable(data) </script> </body> </html>