Null value of column

Null value of column

jalapejalape Posts: 117Questions: 2Answers: 1

Good Morning,
I am using a function found on the page https://datatables.net/forums/discussion/46296/calculating-cells-values, to calculate the total value of a numeric column.

{ data: 'vista_item.porcentaje' },

The problem I run into is when I use render to format the column:

{ data: null,
    render: function ( data, type, row ) {
        return data.vista_item.porcentaje + "%";
    }
},

In that case it does not offer any results. I suppose to be of null value.
The function is:

"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( 3 )
    .data()
    .reduce( function (a, b) {
         return intVal(a) + intVal(b);
    }, 0 );

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

    // Update footer
    $( api.column( 3 ).footer() ).html(
        pageTotal +'%'+' ( '+ total +'% total)'
    );
}

Thank you

Replies

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    In that case it does not offer any results. I suppose to be of null value.

    Are you saying the data doesn't show properly in the table or the sum in the footer is not correct?

    See this thread for totaling rendering columns in the footCallback.

    Kevin

  • jalapejalape Posts: 117Questions: 2Answers: 1
    edited August 2020

    Thanks Kevin for answering,
    If the field is:

    { data: 'vista_item.porcentaje' },
    

    http://javierlasen.es/easd/datos_001.jpg

    But if it is:

    { 
        data: null,
        render: function ( data, type, row ) {
            return data.vista_item.porcentaje + "%";
        }
    },
    

    http://javierlasen.es/easd/datos_002.jpg

    Study this thread in case it can provide some light.

  • allanallan Posts: 61,439Questions: 1Answers: 10,052 Site admin

    So if I understand correctly from the screenshots, the problem is not the output in the cell, which appears correct. But rather the count in the footer?

    That is happening because of the data: null. That will result in:

        total = api
        .column( 3 )
        .data()
    

    giving you the data object for the whole row. So you can’t just sum it, you either need to pick some data out:

    total = api
      .rows()
      .data()
      .pluck(‘vista_item.porcentaje');
    

    Or just use { data: 'vista_item.porcentaje' }, as you originally had. Why can’t you do that?

    Allan

  • jalapejalape Posts: 117Questions: 2Answers: 1

    Thanks Allan for answering,
    Unfortunately the method has not worked, maybe I am doing the column by row change wrong.
    I am doing it like this:

    "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
        .rows( )
        .data()
        .pluck('vista_item.porcentaje')
        .reduce( function (a, b) {
            return intVal(a) + intVal(b);
        }, 0 );
    
        // Total over this page
        pageTotal = api
        .rows( { page: 'current'} )
        .data()
        .pluck('vista_item.porcentaje')
        .reduce( function (a, b) {
            return intVal(a) + intVal(b);
        }, 0 );
    
        // Update footer
        $( api.rows( ).footer() ).html(
            pageTotal +'%'+' ( '+ total +'% total)'
        );
    }
    
  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736
    edited August 2020

    Looks like you changed:

        // Update footer
        $( api.column( 3 ).footer() ).html(
            pageTotal +'%'+' ( '+ total +'% total)'
        );
    

    to

        // Update footer
        $( api.rows( ).footer() ).html(
            pageTotal +'%'+' ( '+ total +'% total)'
        );
    

    There is not an API api.rows( ).footer(). Change it back to what you originally had.

    Kevin

  • jalapejalape Posts: 117Questions: 2Answers: 1

    No matter how hard I try, I always run into the problem of the null value column. Is it not possible to make the Callback call by means of an id or a class applied to the column?
    To better understand the problem I have uploaded the page to the server:

    http://www.javierlasen.es/easd/login/abierto_parentChild.php

    To see how it works, write to Search: 1348 and select the record from the first table.

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736
    edited August 2020

    As I mentioned in my first response you are trying to total a column using columns.render you will need to use cells().render() as described in this thread. Specifically this example:
    http://live.datatables.net/mixegahu/1/edit

    Kevin

  • jalapejalape Posts: 117Questions: 2Answers: 1

    The example has been of great help.
    This way it works perfectly:

    pageTotal = api
    .cells( null, 4, { page: 'current'} )
    .render('display')          
    .reduce( function (a, b) {
        return (intVal(a) + intVal(b)).toFixed(2);
    }, 0 );
    

    I have added: .toFixed (2); to round to two decimal places.
    Thank you very much Kevin

This discussion has been closed.