0

Estoy trabajando con DataTables y con dos códigos de JavaScript. Utilizo el plugins de TableTools que me permite mostrar los botones para exportar los datos en PDF, Excel o Imprimir. A demás estoy utilizando un tfoot que me permite visualizar por medio de otro Script la suma de una columna del DataTable. Al colocar el JavaScript por separado cada uno me funciona correctamente.

El problema es que al colocar los dos Script sólo me muestra el resultado del Script que me suma los valores de la columna del DataTable y no muestras los botones para exportar los datos y me sale el siguiente error.

introducir la descripción de la imagen aquí

Según lo que entiendo del error es que estoy repitiendo o reiniciando el DataTable. Cómo evito esto para poder que me funcione los dos JavaScript a la vez, se puede integrar los dos en uno solo?

A continuación los dos Script

//=== Exportar los datos del dataTable ===

<script type="text/javascript"> 
var table = $('#myTable').DataTable( {
    buttons: [
        'print', 'excel', 'pdf', 'copy'
    ]
} );
  
table.buttons().container()
    .appendTo( $('.col-sm-6:eq(0)', table.table().container() ) );
</script>


// == suma los valores de la columna del DataTable ===

<script type="text/javascript">
$(document).ready(function() {
    $('#myTable').DataTable( {
        "footerCallback": function ( row, data, start, end, display ) {
            var api = this.api(), data;
 
            var intVal = function ( i ) {
                return typeof i === 'string' ?
                    i.replace(/[\$,]/g, '')*1 :
                    typeof i === 'number' ?
                        i : 0;
            };
 
            total = api
                .column( 4 )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );
 
            pageTotal = api
                .column( 4, { page: 'current'} )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );
 
            $( api.column( 4 ).footer() ).html(
                '$'+pageTotal +' ( $'+ total +' total)'
            );
        }
    } );
 } );
</script>

3
  • ¿Qué pasa si pones las dos inicializaciones de DataTable en una sola? ¿O tienen que ir separadas por algún motivo?
    – Alvaro Montoro
    Commented el 26 feb. 2018 a las 0:37
  • He tratado de hacerlas en una sola pero no se como es la forma correcta de hacerlo
    – Horus
    Commented el 26 feb. 2018 a las 0:53
  • La manera correcta de hacerlo es como te ponían en la respuesta. Si no te funciona, deberías agregar un pequeño ejemplo mínimo verificable mostrando cómo lo tienes y para que podamos ver el problema. No sólo agregues el JavaScript, sino también el HTML. Además, si recibes un error en la consola de JavaScript, deberías indicarlo también.
    – Alvaro Montoro
    Commented el 26 feb. 2018 a las 1:47

2 respuestas 2

0

Sucede que estas inicializando dos veces Datatable sobre el elemento $('#myTable'), trata con esto no debería de fallar:

// == suma los valores de la columna del DataTable ===

<script type="text/javascript">
var table;
$(document).ready(function() {
    table = $('#myTable').DataTable( {
         buttons: [
              'print', 'excel', 'pdf', 'copy'
         ],
        "footerCallback": function ( row, data, start, end, display ) {
            var api = this.api(), data;

            var intVal = function ( i ) {
                return typeof i === 'string' ?
                    i.replace(/[\$,]/g, '')*1 :
                    typeof i === 'number' ?
                        i : 0;
            };

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

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

            $( api.column( 4 ).footer() ).html(
                '$'+pageTotal +' ( $'+ total +' total)'
            );
        }
    } );
 } );

//=== Exportar los datos del dataTable ===

table.buttons().container()
    .appendTo( $('.col-sm-6:eq(0)', table.table().container() ) );
</script>
1
  • No me muestra los botones de PDF, Excel y Print
    – Horus
    Commented el 26 feb. 2018 a las 1:24
0

Después de tanto intentar logre dar solución a mi problema. A continuación el código que utilice

<script type="text/javascript">
//var table;
$(document).ready(function() {
 /* table =*/ $('#myTable').DataTable( {
/* buttons: [
              'print', 'excel', 'pdf', 'copy'
         ],  */   
         
  //Agregue esto
    dom: 'B<"clear">lfrtip',
        buttons: ['csv', 'excel', 'pdf', 'print'],
 //
                   "footerCallback": function (row, data, start, end, display) {
                    var api = this.api(), data;
                    var intVal = function(i) {
                        return typeof i === 'string' ?
                            i.replace(/[\$,]/g, '')*1 :
                            typeof i === 'number'?
                                i : 0;
                    };

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

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

                    // Update footer
                    $(api.column(4).footer()).html(
                        '$ '+pageTotal + ' <br />' + '$ '+total
                    );
                }
    } );
 } );

table.buttons().container()
    .appendTo( $('.col-sm-6:eq(0)', table.table().container() ) );
</script>

Arrojando como resultado esto. introducir la descripción de la imagen aquí

3
  • ¿Qué es lo que cambiaste? ¿En qué se diferencia de la solución propuesta por user3646126?
    – Alvaro Montoro
    Commented el 26 feb. 2018 a las 3:21
  • Edite mi respuesta, lo que esta en comentario fue lo que quite más lo que agregue
    – Horus
    Commented el 26 feb. 2018 a las 3:35
  • Ahora el detalle es que al exportar los datos no me exporta el footerCallback
    – Horus
    Commented el 26 feb. 2018 a las 3:41

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.