0

Tengo una tabla la cual se carga estaticamente sus valores. El asunto es que manejo esta tabla con datatables, y al querer sumar las columnas con una clase especifica, no carga nada en el footer, pero al hacer un console.log al resultado de la suma y al indice de cada tabla, este si aparece la informacion y bien calculada.

Este es mi codigo de datatable:

var empresas = $('#empresas').DataTable({
        "language": traduccion,
        "responsive": false,
        "autoWidth": false,
        "order": [[ 2, "desc" ]],
        "columnDefs":[
            {
                "targets": 'dt-formater',
                "render": $.fn.dataTable.render.number('.', ',', 0, '$')
            },
        ],
        "footerCallback": function(row, data, start, end, display) {
            var api = this.api();

            api.columns('.dt-formater', { page: 'current' }).every(function () {
                var sum = api
                    .cells( null, this.index(), { page: 'current'} )
                    .render()
                    .reduce(function (a, b) {
                        var x = parseFloat(a) || 0;
                        var y = parseFloat(b) || 0;
                        return x + y;
                    }, 0);
                console.log(this.index() +' '+ sum);
                $(this.footer()).html(sum);
            });
        },
        
    });

Trate tambien cargar en el footer con esta opcion:

$(api.column( this.index() ).footer() ).html(sum);

En esas dos opciones, ninguna carga informacion en el footer. Espero me puedan ayudar

1 respuesta 1

0

Solucionado! Despues de leer, encontre que datatable no crea la etiqueta ni los elementos del footer, asi que cree en la tabla el footer y las columnas correspondientes a este y se soluciono altiro. Dejo el codigo de datatable por si alguien le sirve. Basicamente lo que hace es calcular el total de todas las columnas con la clase dt-formated, de forma automatica y las asigna al tfooter, eso usando footerCallback:

var empresas = $('#empresas').DataTable({
        "language": traduccion,
        "responsive": false,
        "autoWidth": false,
        "order": [[ 2, "desc" ]],
        "columnDefs":[
            {
                "targets": 'dt-formater',  // Todas las columnas con clase 'dt-formater'
                "render": $.fn.dataTable.render.number('.', ',', 0, '$')
            },
        ],
        "footerCallback": function(tfoot, data, start, end, display) {
            var api = this.api();

            api.columns('.dt-formater', { page: 'current' }).every(function () {
                var sum = api
                    .cells( null, this.index(), { page: 'current'} )
                    .render()
                    .reduce(function (a, b) {
                        total = 0;
                        var x = parseInt(a) || 0;
                        var y = parseInt(b) || 0;
                        total = x + y;
                        return total;
                    }, 0);
                //console.log('indice: '+ this.index() +' suma: '+ sum);
                var numFormat = $.fn.dataTable.render.number('.', ',', 0, '$').display;
                $(api.column( this.index() ).footer()).html(numFormat(sum));
            });
        },
        
    });

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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