Custom row rendering / aggregates

Gargiucn

I'm using the example:
https://datatables.net/extensions/rowgroup/examples/initialisation/customRow.html

Totals change based on the number of rows displayed per page.
Is it possible to display the total per group regardless of the number of rows displayed per page?
I thought I had found a post for this but I can't find it anymore...

Thanks,
Giuseppe

kthorngren

This might be the thread you are looking for.

Kevin

Gargiucn

Thanks, that's just what I was looking for.
I have only one problem: I can't get the totals, even if the filter seems to work well...

order: [[ 1, 'desc' ], [ 7, 'desc' ]],      
rowGroup: {
    startRender: null,
    endRender: function ( rows, group ) {
        var filteredData = $('#tabpagamenti').DataTable()
        .rows()
        .data()
        .filter( function ( data, index ) {
            return data[1] == group ? true : false;
        } )
        .pluck('pagamenti')
        .pluck('pag_importo')
        //.pluck(5)
        .sum();
        return group+' '+rows.count()+' pagamenti, € '+filteredData+' totale';
        },
        dataSrc: function(row) {
            return row.contratti.con_num+row.contratti.con_sigla.trim();
        }
    },

P.S. column 0 = responsive

Where am I doing wrong?

Giuseppe

kthorngren

Looks like the sum should work. We would need to see a simple test case with your specific Datatables config and data to offer suggestions of why its not working.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

Gargiucn

I created an example table with values typed directly between <td></td> and the grouping works perfectly:
http://live.datatables.net/dupopebo/1/
I think the problem is the "Contratto" field which is displayed as a union of two fields:

{
   data: "contratti.con_num",
   className: "text-right text-nowrap",
   width: "5%",
   render: function ( data, type, row ) {
      return data+row.contratti.con_sigla.trim();   
   }    
},

in fact in "dataSrc" I cannot write:

dataSrc: 1 //contratto column

but:

dataSrc: function(row) {
   return   row.contratti.con_num+row.contratti.con_sigla.trim();
}

to display the correct groupings even if the total remains zero (sum of "Pagamento" column).

I don't know what I can do...

Giuseppe

colin

Hi @Gargiucn ,

Probably the most useful thing to progress this would be if you could make your example the same as the problem we're trying to save. You could just create an object that contains a few rows, and load that at initialisation with data, something like this.

Cheers,

Colin

Gargiucn

Something like this?
live.datatables.net/dupopebo/4/

I'm confused...
Giuseppe

kthorngren

The problem is you didn't put the rowGroup dataSrc option inside the rowGroup option config. That removed the undefined result.

To understand how the endRender function works you can use console.log statements. This will help to debug. See your updated example here:
http://live.datatables.net/totalomu/1/edit

Since you are using objects not arrays you need to access the row data as objects. And your compare statement needs to match how you built the groups, like this: return data.num + data.sigla == group ? true : false;

The example should be working.

Kevin

Gargiucn

Ah, ok, "undefined" is due to a my write error...
Replacing:

.filter( function ( data, index ) {
    return data[0] == group ? true : false;
     } )

with:

.filter( function ( data, index ) {
    console.log(data);
    return data.num + data.sigla == group ? true : false;
} )

the totals are correctly displayed!.

Thank you so much for your patience ...

Giuseppe

Gargiucn

It's incredible!
in the example everything works but in my program the total changes based on the number of lines displayed ...

my script:

var pagamentiTable = $('#tabpagamenti').DataTable( {
    responsive: true,
    processing: true,
    serverSide: true,   
    deferRender: true,  
    ajax: {
        url: "php/table-pagamenti.php",
        type: "POST",
        error: function(){
            alert("errore table-pagamenti.php");
        }   
    },
    columns: [
     {
        // Responsive column control
        data: null,
        defaultContent: '',
        className: 'control',
        searchable:false,
        sorting: false,
        orderable: false            
     },
     {
        data: "contratti.con_num",
        className: "text-right text-nowrap",
        render: function ( data, type, row ) {
            return data+row.contratti.con_sigla.trim(); 
        }   
    },
    {
        data: "contratti.con_data",
        class: "nowrap",
    },                  
    {
        data: "clienti.cli_ragsoc",
        class: "nowrap",
    },
    {
        data: "contratti.con_importo",
        className: 'text-right text-nowrap',
        render: $.fn.dataTable.render.number( '.', ',', 2, '€ ' )               
    },          
    {
        data: "pagamenti.pag_importo",
        className: 'text-right text-nowrap',
        render: $.fn.dataTable.render.number( '.', ',', 2, '€ ' )
    },                          
    {
        data: "pagamenti.pag_data",
        class: "nowrap",
    },          
    {
               data: "pagamenti.pag_verif",
        className: 'text-center',
        sorting:false,
        searchable:false,
        width: "5%",
        render: function ( data, type, row ) {
                    if ( type === 'display' ) {
                if (data === "1"){
                    return '<i class="fa fa-check-square-o" aria-hidden="true"></i>';
            }
            else
                return '<i class="fa fa-square-o" aria-hidden="true"></i>';
        }
                return data;
        },
    {
        data: "pagamenti.pag_nota",
        searchable:false,
        sorting: false,
                orderable: false,
    }
    ],      
        select: {
        style: 'single',
        selector: 'td:not(.control)'
       },
      order: [[ 1, 'desc' ], [ 6, 'desc' ]],    //row 0 responsive control  
      rowGroup: {
        startRender: null,
        endRender: function ( rows, group ) {
                var somma_pagamenti = $('#tabpagamenti').DataTable()
            .rows()
            .data()
            .filter( function ( data, index ) {
                return data.contratti.con_num +
                    data.contratti.con_sigla.trim() == group ? true : false;
            } )
            .pluck('pagamenti')
            .pluck('pag_importo')
            .sum();
            return $('<tr/>')
            .append( '<td colspan="8">'+rows.count()+' righe visualizzate. Totale: '+somma_pagamenti+'</td>' )
    },  
    dataSrc: function(row) {
        return row.contratti.con_num + row.contratti.con_sigla.trim();
    }
},
lengthChange: true,
...

Maybe I don't realize I'm doing something wrong...

Giuseppe

colin

It seems you have two pluck() in your code above, not sure if that makes a difference. It would be helpful for us to debug if you could update your test case so it's using the same data/objects.

C