3

Buen día: Mi consulta es la siguiente , no soy developer experimentado , sino que estoy tratando de implementar un dashboard con python utilizando FLASK

Mi consulta es la siguiente:

En mi aplicacion tengo una tabla y algunos graficos que se cargan al logearse en la App La ruta seria la siguiente:

@app.route('/preguntas')
@logueado
def preguntas():
    # cursor
    cur = mysql.connection.cursor()
    # obtengo mail    
    result=cur.execute("SELECT MarcaLimpia,Modelo ,SUM(CASE WHEN month=1 THEN Cantidad END) Ene, SUM(CASE WHEN month=2 THEN Cantidad END) Feb, SUM(CASE WHEN month=3 THEN Cantidad END) Mar, SUM(CASE WHEN month=4 THEN Cantidad END) Apr, SUM(CASE WHEN month=5 THEN Cantidad END) May, SUM(CASE WHEN month=6 THEN Cantidad END) Jun, SUM(CASE WHEN month=7 THEN Cantidad END) Jul, SUM(CASE WHEN month=8 THEN Cantidad END) Ago, SUM(CASE WHEN month=9 THEN Cantidad END) Sep, SUM(CASE WHEN month=10 THEN Cantidad END) Oct, SUM(CASE WHEN month=11 THEN Cantidad END) Nov, SUM(CASE WHEN month=12 THEN Cantidad END) Dic FROM(SELECT FactImpo.*, EXTRACT(MONTH FROM Fecha) month FROM FactImpo) FactImpo GROUP BY Modelo")
    productos = cur.fetchall()
    prom = cur.execute(
        "SELECT  ROUND(AVG(Price),2) as avg from PreciosMeli WHERE Tipo='Impresoras'")
    promedio = cur.fetchone()
    total = cur.execute(
        "SELECT  COUNT(*) as cantidad from PreciosMeli WHERE Tipo='Impresoras'")
    publicaciones = cur.fetchone()
    if result > 0:
        return render_template('preguntas.html',
                               productos=productos,
                               promedio=promedio,
                               publicaciones=publicaciones)
    else:
        return render_template('preguntas.html')
    cur.close()

Luego , el codigo HTML de la tabla es :

<table id="example" class="table table-dark table-striped table-sm table-bordered" style="width:100%">
            <thead class="thead-light">
              <tr>
                {% for titulo in productos[0] %}
                <td>{{ titulo }}</td>         
                {% endfor %}

              </tr>
            </thead>
            <tbody>
              {% for producto in productos %}            
                      <tr>
                        <td>{{producto.MarcaLimpia}}</td>
                        <td>{{producto.Modelo}}</td>
                        <td>{{producto.Ene}}</td>
                        <td>{{producto.Feb}}</td>
                        <td>{{producto.Mar}}</td>
                        <td>{{producto.Apr}}</td>
                        <td>{{producto.May}}</td>
                        <td>{{producto.Jun}}</td>
                        <td>{{producto.Jul}}</td>
                        <td>{{producto.Ago}}</td>
                        <td>{{producto.Sep}}</td>
                        <td>{{producto.Oct}}</td>
                        <td>{{producto.Nov}}</td>
                        <td>{{producto.Dic}}</td>
                      </tr>
                      {% endfor %}

            </tbody>

          </table>

Me gustaria agregar un boton el cual pueda utilizar por ejemplo como filtro de año Entiendo que se hace con ajax , estuve buscando tutoriales , pero la mayoria son con PHP y las explicaciones son bastante genericas En muchos lugares lo que hacen es crear una ruta nueva , la cual solamente utiliza el metodo post y llamada /api o similar

Lo que no entiendo es como le vuelvo a enviar a mi ruta /preguntas , el nuevo parametro de filtro sumandole la clausula WHERE año = "año elegido en el selector"

Cualquier edicion que pueda hacer a esta pregunta sera bien recibida para que sea mas clara y cualquier ayuda me viene bien Si conocen alguna web que tenga el armado de un dashboard con filtros mediante ajax tambien sera bien recibida me gusta bastante investigar y no pretendo que realicen el trabajo por mi , sino continuar desarrollandome
Gracias a todos!!

0

1 respuesta 1

1

El proceso seria el siguiente:

1. Definir en nuestra app las dos rutas, una para la vista y la otra para la petición AJAX

@app.route('/view')
def show_view():
    datos = "Consulta en BD"
    return render_template("view.html", datos=datos)

@app.route('/ajax' methods=["GET", "POST"])             
def ajax():
    if request.method == "POST":
        search_term = request.form
        search = search_term["value"]
        datos_modificados = "busqueda usando el search"
        return render_template("tabla.html", datos_modificados=datos_modificados)

2. Creamos los archivos html, view.html es la vista de los datos, tabla.html lo usaremos de modelo para formatear los datos y regresalos ya como contenido de una tabla.


view.html

<!DOCTYPE html>
<html>
<head>
    <title>Index</title>
    <script
    src="JQUERY"></script> 
</head>
<body>

    <select name="cambio" id="" onchange ="consulta_ajax(this)">
        <option value="ASC">ASCENDENTE</option>
        <option value="DESC">DESCENTEN</option>
    </select>

    <table>
    <thead>
    <th>id</th>
    <th>nombre</th>
    </thead>
    <tbody id="tabla">
    {% for persona in datos %}
        <tr>
        <td>{{ persona.id }}</td>
        <td>{{ persona.nombre }}</td>
        </tr>
    {% endfor %}
    </tbody>
    </table>


    <script type="text/javascript">
        function consulta_ajax(element){
            let valor = element.value;
            let tabla = document.getElementById("tabla");
            $.ajax({
            url:"/ajax",
            type:"POST",
            data: {"value":valor},
            success: function(response){
                tabla.innerHTML = response

            },
            error: function(error){
            //console.log(error);
            },
            });
        }
    </script>
</body>
</html>

tabla.html

{% for persona in datos_modificados %}
        <tr>
        <td>{{ persona.id }}</td>
        <td>{{ persona.nombre }}</td>
        </tr>
{% endfor %}

¿Como funciona?

1. Hacemos la petición AJAX con el dato que queremos usar, esto en la ruta /ajax.

2. Vamos a recibir el dato que pasamos en la petición, accedemos a el usando "value", ya que, es la llave del diccionario data.

3. Realizamos las consultas correspondientes, y el valor que vamos a retornar a la petición va a ser un render_template de nuestra tabla.html con los datos filtrados.

Para nosotros mostrar o renderizar una vista cualquiera usamos render_template, pero bien, ¿que envía esta función a nuestro navegador para mostrar el contenido que queremos?, la respuesta es HTML.

Todo lo que regresa la función render_template es un HTML al cual (si lo deseamos) le hemos incrustado variables.

Por lo tanto, tenemos la facilidad de generar tablas, formatos y demás diseños en HTML y recibirlos por AJAX si es nuestra necesidad.

Claro esta, en el caso de una API normal, tu recibirías todos los datos de la consulta en formato JSON, sin embargo, en mi opinión es mas sencillo recibir ya una tabla lista, que crearla con javascript. Todo es según la necesidad.

4. Este código HTML va a tener los datos ya ordenamos de la forma en que queríamos, lo que haremos sera enviarlo a nuestra web donde hicimos la petición AJAX.

5. Una vez estamos en nuestro archivo javascript, vamos a proceder a recibir el response de la petición AJAX, ¿que vamos a recibir?, ¿un JSON? NO. Vamos a recibir el HTML renderizado con los datos incrustados, en este caso al usar tabla.html podríamos recibir algo así:

introducir la descripción de la imagen aquí

Este sera nuestro response, que si vemos es el contenido de una tabla.

6. Procedemos entonces a "insertarlo" dentro de nuestra tabla.

7. Tenemos la función innerHTML que inserta contenido HTML convirtiendo las etiquetas a su correspondiente forma de objeto de HTML, logra esto que se vea la tabla.

El resultado final de nuestro view.html:

introducir la descripción de la imagen aquí

Resumen rapido: Consultamos con ajax y vamos a retornar como respuesta nuestra tabla ya armada usando un template (html) y al recibirlo vamos a insertarlo en nuestra web con innerHTML

Información Extra

Si deseamos manipular nosotros mismos los datos podemos retornar un JSON desde Flask.

Para ello importamos la libreria de Flask llamada jsonify

from flask import jsonify

@app.route('/consulta')
def consulta():
    if request.method == "POST":
        search_term = request.form
        search = search_term["value"]
        consulta = "busqueda usando el search".all()
        return jsonify(consulta)

En el script de AJAX

<script type="text/javascript">
    function consulta_ajax(element){
        let valor = element.value;
        let tabla = document.getElementById("tabla");
        $.ajax({
        url:"/ajax",
        type:"POST",
        data: {"value":valor},
        success: function(response){
            datos = JSON.parse(response);
        },
        error: function(error){
        //console.log(error);
        },
        });
    }
</script>

PD: te recomiendo implementar FlaskSQLAlchemy para las consultas es mejor :D

10
  • Muchas gracias por tu respuesta Esto ya me sirve mucho , lo que no estoy entendiendo donde poner es el codigo que esta en el bloque tabla.html .Entiendo que ahi usas los datos modificados que te envia la ruta/ajax .Pero no veo a donde poner ese bloque de codigo.. y no entiendo el valor response que asigna la funcion de ajax a innerhtml Voy a modificar lo que tengo , con algo similar a lo que me indicas y luego agrego esa info Commented el 17 may. 2020 a las 2:43
  • @MatiasOrdoñez Modifique la pregunta, agregue mas información, espero que se aclare tu duda y te funcione el ejemplo. Si te sirve, no dudes en colocar la pregunta como aceptada, este problema puede ser frecuente para otras personas :D
    – Dev 200
    Commented el 18 may. 2020 a las 12:01
  • Excelente!! ahora si entendi la variable response es el return de la ruta /ajax y eso lo utilizo para actualizar los datos que estan en el inner html Entiendo que este ejemplo es practico para cuando tengo una sola tabla Si en mi pagina tuviera varias tablas y tarjetas y graficos , entonces entiendo que lo mas practico seria retornar el archivo json filtrado y luego usar esos datos segun necesite para cada visualizacion? Para no crear un template para cada uno de los elementos por separado Commented el 18 may. 2020 a las 21:29
  • 1
    Sobre lo que dices, seria algo como una Single Page App, y si, necesitas tener tu peticion de ajax para cada pagina o si quieres puedes hacer una ruta que se llame AJAX y en el diccionario que le pasas agregas que pagina necesitas pedir datos let data = { "value":valor, "page":pagina } y en la consulta AJAX le pones un if para ver que pagina necesita retornan, si me explico?, esto para hacer una unica ruta de ajax
    – Dev 200
    Commented el 19 may. 2020 a las 13:33
  • 1
    perdon que te moleste de nuevo , ahora implemente data tables y no entiendo bien como generar la tabla desde el json con los datos de ajax alguna vez utilizaste datatables ? lo agregue porque tenia plugins para descarga y paginacion y algunas funcionalidades mas Commented el 3 jun. 2020 a las 15:53

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.