Problem Grand Total in Footer

VAILLY Olivier · October 2015

Hi,

i'm trying to make a footerCallBack from the sample in this site

On loading page, Firebug say me : "TypeError: reduce of empty array with no initial value"

I check my code, all is conform

just a point, my data comes from a php script with JSON and all is ok without the footercallback !

Any idea ?
Thanks
Oliver

jLinux · October 2015

Can you atleast give us anything for debugging?.. :-P

The js code? or a JSBin instance? Or a link to the site? etc etc.

Didnt really give us much to go on to help you

VAILLY Olivier · October 2015

Oups sorry you are right, i'm confused !
Tomorow i'll post my code ...

VAILLY Olivier · October 2015

So to resume :

1) one file for HTML design with table
2) a JS file for dataTable and Editor declaration
3) a PHP file for data retreiving from Postgresql bdd via AJAX

My JS file :

/*
 * Editor client script for DB table stat_tocama
 * Created by http://editor.datatables.net/generator
 */

(function($){

$(document).ready(function() {
        var user_code = $("#user_code").text();
    var editor = new $.fn.dataTable.Editor( {
        ajax: 'php/table.stat_tocama.php',
        table: '#stat_tocama',
        fields: [
                        {
                                "label": "Code Client",
                                "name": "dimension_client.code",
                                "type": "readonly"
                        },
                        {
                                "label": "Client",
                                "name": "dimension_client.nom",
                                "type": "readonly"
                        },
                        {
                                "label": "Code Produit",
                                "name": "dimension_produit.code",
                                "type": "readonly"
                        },
                        {
                                "label": "Produit",
                                "name": "dimension_produit.nom",
                                "type": "readonly"
                        },
            {
                "label": "TO N-1",
                "name": "stat_tocama_budget.somme_qte_n_1",
                                "type": "readonly"
            },
            {
                "label": "CA N-1",
                "name": "stat_tocama_budget.somme_ca_n_1",
                                "type": "readonly"
            },
            {
                "label": "TO",
                "name": "stat_tocama_budget.somme_tonnage",
                                "type": "readonly"
            },
                        {
                                "label": "PX",
                                "name": "stat_tocama_budget.px",
                                "type": "readonly"
                        },
                        {
                                "label": "CA",
                                "name": "stat_tocama_budget.somme_ca",
                                "type": "readonly"
                        },
            {
                "label": "TO Budget",
                "name": "stat_tocama_budget.somme_qte_budget"
            },
            {
                "label": "PX Budget",
                "name": "stat_tocama_budget.px_budget"
            },
                        {
                                "label": "CA Budget",
                                "name": null,
                                "type": "readonly"
                        }
        ]
    } );

        // Activate an inline edit on click of a table cell
        $('#stat_tocama').on( 'click', 'tbody td:nth-child(10), td:nth-child(11)', function (e) {
            editor.inline( this );
        } );

        $('#stat_tocama').on( 'click', 'td', function (e) {
            var nom_client = $(this).parent().children('td:nth-child(2)')[0].innerHTML;
            $("#nom_client").text(nom_client);
        } );

    var table = $('#stat_tocama').DataTable( {
        dom: 'Bfrtip',
        ajax: {url: 'php/table.stat_tocama.php', type:'POST', data:function(d){d.user_code=user_code;}},
                processing:true,
                serverSide:false,
                pageLength:50,
        columns: [
            {
                "data": "dimension_client.code" 
            },
            {
                "data": "dimension_client.nom" 
            },
            {
                "data": "dimension_produit.code" 
            },
            {
                "data": "dimension_produit.nom" 
            },
            {
                "data": "stat_tocama_budget.somme_qte_n_1"
            },
            {
                "data": "stat_tocama_budget.somme_ca_n_1"
            },
            {
                "data": "stat_tocama_budget.somme_tonnage"
            },
            {
                "data": "stat_tocama_budget.px"
            },
            {
                "data": "stat_tocama_budget.somme_ca"
            },
            {
                "data": "stat_tocama_budget.somme_qte_budget"
            },
            {
                "data": "stat_tocama_budget.px_budget"
            },
            {
                "data": null, render:function(data, type, row){ return row.stat_tocama_budget.somme_qte_budget * row.stat_tocama_budget.px_budget;}
            }
        ],
        select: true,
        lengthChange: false,
        buttons: [
            { extend: 'create', editor: editor },
            { extend: 'edit',   editor: editor },
            'excel'
        ],
                "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( 7 )
                       .data()
                       .reduce( function (a, b) {
                           return intVal(a) + intVal(b);
                       } ); 
                    $( api.column( 4 ).footer() ).html(
                        ' ( $'+ total +' total)'
                    );
                 }
    } );

} );

}(jQuery));

3) My php file :

<?php

/*
 * Editor server script for DB table stat_tocama
 * Created by http://editor.datatables.net/generator
 */


// DataTables PHP library and database connection
include( "lib/DataTables.php" );

// Alias Editor classes so they are easy to use
use
    DataTables\Editor,
    DataTables\Editor\Field,
    DataTables\Editor\Format,
    DataTables\Editor\Mjoin,
    DataTables\Editor\Upload,
    DataTables\Editor\Validate;

// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'stat_tocama_budget', 'cle' )
    ->fields(
        Field::inst( 'dimension_client.code' )
            ->set( false ),
        Field::inst( 'dimension_client.nom' )
            ->set( false ),
        Field::inst( 'dimension_produit.code' )
            ->set( false ),
        Field::inst( 'dimension_produit.nom' )
            ->set( false ),
        Field::inst( 'stat_tocama_budget.somme_qte_n_1' ),
        Field::inst( 'stat_tocama_budget.somme_ca_n_1' ),
        Field::inst( 'stat_tocama_budget.somme_tonnage' ),
        Field::inst( 'stat_tocama_budget.somme_ca' ),
        Field::inst( 'stat_tocama_budget.somme_qte_budget' ),
        Field::inst( 'stat_tocama_budget.somme_ca_budget' ),
        Field::inst( 'stat_tocama_budget.px' ),
        Field::inst( 'stat_tocama_budget.px_budget' )
    )
        ->leftJoin('dimension_vendeur', 'dimension_vendeur.cle_vendeur', '=', 'stat_tocama_budget.cle_vendeur1')
        ->leftJoin('dimension_client', 'dimension_client.cle_client', '=', 'stat_tocama_budget.cle_client')
        ->leftJoin('dimension_produit', 'dimension_produit.cle_produit', '=', 'stat_tocama_budget.cle_produit')
        ->where( function($q){
            $q
                ->where('dimension_vendeur.code', 'JDE', '=');
        })
    ->process( $_POST )
    ->json();

Thanks for yoour help :)
Oliver

allan · October 2015

Hi Oliver,

Thanks for the code. Change:

.reduce( function (a, b) {
return intVal(a) + intVal(b);
} );

to be:

                       .reduce( function (a, b) {
                           return intVal(a) + intVal(b);
                       }, 0 );

Why? As the error suggests the array is empty on the first run (because there is no data int he table until it has been loaded). reduce() can't operate on just an empty array, so you need to give it a default. I'll update my footer example to include that!

Allan

VAILLY Olivier · October 2015

great Allan ! thanks !

I was running around such solution but with a test on data.length variable but your code is much more serious !

:)

Oliver

Problem Grand Total in Footer

Problem Grand Total in Footer

Replies

Howdy, Stranger!

Categories

DataTables

Problem Grand Total in Footer

Problem Grand Total in Footer

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables