1

Tengo la necesidad de poner 3 datos en footer de datatables. Estoy usando Footer CallBack de datatables. La idea es poner el subtotal, propinas y total (suma de subtotal y propina). En la imagen adjunta se puede ver como esintroducir la descripción de la imagen aquí

mi codigo html:

<tfoot>
  <tr>
    <th colspan="5" style="text-align:right">Sub Total:</th>
    <th></th>
  </tr>
  <tr>
    <th colspan="5" style="text-align:right">Propina(10%):</th>
    <th></th>
  </tr>
  <tr>
    <th colspan="5" style="text-align:right">Total:</th>
    <th></th>
  </tr>
</tfoot>

codigo js:

"footerCallback": function ( row, data, start, end, display ) {
            var api = this.api(), data;

            // Remove the formatting to get integer data for summation
            var intVal = function ( i ) {
                return typeof i === 'string' ?
                    i.replace(/[\$,]/g, '')*1 :
                    typeof i === 'number' ?
                        i : 0;
            };

            // Total over all pages
            total = api
                .column( 4 )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );

            // Total over this page
            pageTotal = api
                .column( 5, { page: 'current'} )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );

            // Update footer
            $( api.column( 5 ).footer() ).html(

                ('$'+number_format(pageTotal))
        }

como siempre, gracias a todos lo que puedan ayudar u orientarme en como poder realizar esto. saludos.

1 respuesta 1

0

He llegado a esta pregunta buscando lo mismo, y he encontrado que por lo que parece con la api tal cual no puedes rellenar otras filas de una manera que pudiera parecer lógica como:

$(this.api().row(1).column(0).footer()).html('Propina');

Pero sí se puede conseguir de otra manera, pongo mi código como ejemplo:

HTML:

<tfoot>
    <tr>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
    </tr>
    <tr>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
    </tr>
</tfoot>

JAVASCRIPT:

footerCallback: function (tfoot) {
    var total = this.api().ajax.json().total;
    //ROW 0
    $(this.api().column(0).footer()).html('TOTAL:');
    $(this.api().column(1).footer()).html(total[2]);
    $(this.api().column(2).footer()).html(total[0]);
    $(this.api().column(3).footer()).html(total[1]);
    $(this.api().column(4).footer()).html(total[3]);
    $(this.api().column(5).footer()).html();
    //ROW 1
    this.api().context[0].aoFooter[1][0].cell.innerHTML = 'FC | PPTO: ';
    this.api().context[0].aoFooter[1][1].cell.innerHTML = total[4] + ' | ' + total[5];
    this.api().context[0].aoFooter[1][2].cell.innerHTML = 'FCvsPPTO';
    this.api().context[0].aoFooter[1][3].cell.innerHTML = (total[4] - total[5]);
    this.api().context[0].aoFooter[1][4].cell.innerHTML = 'VARIACIÓN';
    this.api().context[0].aoFooter[1][5].cell.innerHTML = (((total[4] - total[5])/total[5])*100).toFixed(0)+'%';
},

La fila 0 también se podría poner así:

//ROW 0
this.api().context[0].aoFooter[0][0].cell.innerHTML = 'TOTAL:';
this.api().context[0].aoFooter[0][1].cell.innerHTML = total[2];
this.api().context[0].aoFooter[0][2].cell.innerHTML = total[0];
this.api().context[0].aoFooter[0][3].cell.innerHTML = total[1];
this.api().context[0].aoFooter[0][4].cell.innerHTML = total[3];
this.api().context[0].aoFooter[0][5].cell.innerHTML = '';

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.