Problem with Script does not work properly

Question

Problem with Script does not work properly

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I am working with DataTables and with two JavaScript codes. I use the TableTools plugins that allow me to show the buttons to export the data in PDF, Excel or Print. In addition I am using a tfoot that allows me to visualize by means of another Script the sum of a column of the DataTable. By placing the JavaScript separately, each one works correctly.

The problem is that placing the two scripts only shows me the result of the script that adds the values of the DataTable column and does not show the buttons to export the data and I get the following error.

According to what I understand the error is that I am repeating or restarting the DataTable. How do I avoid this in order for the two JavaScript to work at the same time, can the two be integrated into one?

Then the two 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>

mysql javascript jquery php datatables

asked by Horus 25.02.2018 в 21:32

source

2 answers

0

It happens that you are initializing twice Datatable on the element $ ('# myTable'), deal with this should not fail:

// == 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>

answered by 26.02.2018 в 02:01

Android class diagram (uml) Why does data.rows.length return 0 when making an insert in a BD SQLite?

score 0 · Accepted Answer

After so much trying I managed to solve my problem. Next, the code you use

<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>

Throwing this out as a result.