1

Tengo una tabla con datos obtenidos desde Python, lo renderizo a HTML con Jinja2.

La tabla es la siguiente

<table class="table table-sm  table-striped w-100" id="ejemplo">
                <thead>
                    <tr>
                        <th>Empleador</th>
                        <th>Mes Liquidado</th>
                        <th>Fecha de Liquidación</th>
                        <th>Cantidad de Empleados</th>
                        <th>Importe</th>
                        <th>Cuota Sindical</th>
                        <th>Res. 11/16</th>
                        <th>Otros Aportes</th>
                        <th>Total</th>
                        <th>Estado</th>
                    </tr>
                </thead>
                <tbody>
                    {%for datos in datos%}
                    <tr>
                        <td>{{datos.15}}</td>
                        <td>{{datos.4.strftime('%m-%Y')}}</td>
                        <td>{{datos.5.strftime('%d-%m-%Y')}}</td>
                        <td>{{datos.9}}</td>
                        <td id="Total0">{{"${:,.2f}".format(datos.6)}}</td>
                        <td id="Total1">{{"${:,.2f}".format(datos.6*15/1000)}}</td>
                        <td id="Total2">{{"${:,.2f}".format(datos.6*15/1000)}}</td>
                        <td id="Total3">{{"${:,.2f}".format(datos.8)}}</td>
                        <td id="Total4">{{"${:,.2f}".format(datos.8+datos.6*15/1000+datos.6*15/1000)}}</td>
                        {%if datos.10==1%}<td>Anulada</td>{%endif%}
                        {%if datos.10==0%}<td>Generada</td>{%endif%}
                        {%if datos.10==2%}<td>Pendiente</td>{%endif%}
                        {%if datos.10==3%}<td>Confirmada</td>{%endif%}
                    </tr>
                    {%endfor%}
                </tbody>
            </table>

El caso es que quiero sumar las las cada fila de las <td> que poseen por id="TotalN".

Vi códigos en Javascript pero ninguno me ha funcionado, como puedo hacerlo de tal forma que al <tfooter> pueda aplicar los resultados obtenidos en la función. La función es llamada junto con la carga de la página.

7
  • ¿Qué valores tienen almacenados esas celdas?
    – user128299
    Commented el 13 jul. 2020 a las 1:58
  • datos.6 ? eso si quiera es valido?
    – Layer
    Commented el 13 jul. 2020 a las 2:04
  • Son decimal que por medio de la función {{"${:,.2f}".format()}} se convierten en price Commented el 13 jul. 2020 a las 2:04
  • pero osea, datos no es una variable entonces?, porque si es asi tendria que tener una propiedad 6, no se, muy raro. se supone no puedes ponerle puntos decimales de esa forma.
    – Layer
    Commented el 13 jul. 2020 a las 2:05
  • @Riven, si son validos, son decimales obtenidos de una tabla Mysql desde Flask, el caso es que no lo puedo hacer desde la funcion SUM() de SQL porque el resto son datos calculables. Se envian como parametro a Jinja2 con el nombre de datos, si bien no es una buena practica, es lo que se establecio previamente Commented el 13 jul. 2020 a las 2:06

1 respuesta 1

1

Solo recorre el tbody tr con un each, y almacena los valores en variables como t0, t1, ...,t4.

Ejemplo:

$( document ).ready(function() {
    sumarTbody();
});

function sumarTbody(){
    var t0=0,t1=0,t2=0,t3=0,t4=0;
    $("#datosasumar tr").each(function(ind,ele){//recorre tr's
        $("td",ele).each(function(i,e){//recorre td's            
          if(i==4) t0+=parseFloat($(e).html());
          if(i==5) t1+=Number($(e).html());
          if(i==6) t2+=Number($(e).html());
          if(i==7) t3+=Number($(e).html());
          if(i==8) t4+=Number($(e).html());
        })
    })
    console.log(t0,t1,t2,t3,t4);//renderiza tu footer con estos valores
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-sm  table-striped w-100" id="ejemplo">
    <thead>
        <tr>
            <th>Empleador</th>
            <th>Mes Liquidado</th>
            <th>Fecha de Liquidación</th>
            <th>Cantidad de Empleados</th>
            <th>Importe</th>
            <th>Cuota Sindical</th>
            <th>Res. 11/16</th>
            <th>Otros Aportes</th>
            <th>Total</th>
            <th>Estado</th>
        </tr>
    </thead>
    <tbody id="datosasumar">
        <tr>
            <td>1</td>
            <td>01-10-2020</td>
            <td>02-10-2020</td>
            <td>dato1</td>
            <td>33.41</td>
            <td>65.33</td>
            <td>32.21</td>
            <td>34.32</td>
            <td>100.22</td>
            <td>Confirmada</td>
        </tr>
        <tr>
            <td>2</td>
            <td>03-10-2020</td>
            <td>04-10-2020</td>
            <td>dato1</td>
            <td>33.41</td>
            <td>65.33</td>
            <td>32.21</td>
            <td>34.32</td>
            <td>100.22</td>
            <td>Confirmada</td>
        </tr>
        <tr>
            <td>3</td>
            <td>05-10-2020</td>
            <td>06-10-2020</td>
            <td>dato3</td>
            <td>33.41</td>
            <td>65.33</td>
            <td>32.21</td>
            <td>34.32</td>
            <td>100.22</td>
            <td>Confirmada</td>
        </tr>
    </tbody>
</table>

Lo único que faltaría es renderizar tu footer.

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.