Group totals are at the end of the page instead of after the group and are "NaN".

Group totals are at the end of the page instead of after the group and are "NaN".

GlyndwrGlyndwr Posts: 117Questions: 32Answers: 0

Hi, I wand to group on the first column and total the last three columns. I used the example provided however the totals appear at the end of the page instead of after the group and are "NaN". Also, is it possible to only provide a total at the end of a group and not when a group finishes at the end of a page (i.e., if a group goes over three pages have one total at the end)?

The code is (I tried with rowGroup first):

 var activityUpdateTable = $('#activityUpdateTable').DataTable( {

        "info":     false,
        dom: 'Bfrtip',
        buttons: ['copy', 'csv', 'excel', 'pdf', 'print'],
        columns: [                  
              { data: null, render: function ( data, type, row ) {
                  // Combine the first and last names into a single table field
                  return data.surname+', '+data.firstname;
              } },
              {data: 'startDate',
                  defaultContent: ""},
              {data: 'type',
                  defaultContent: ""},
              {data: 'description',
                  defaultContent: ""},
              {data: 'kilometres',
                  defaultContent: "0"},
              {data: 'nightsUnderCanvas',
                  defaultContent: "0",
              },
              {data: 'nightsInBuilding',
                  defaultContent: "0",
              },
             ],
         columnDefs: [ {
             targets: [1],
             render: $.fn.dataTable.render.moment( 'DD/MM/YYYY' )
         } ],

         rowGroup: {
            startRender: null,
            endRender: function ( rows, group ) {
                var kmTotal = rows
                    .data()
                    .pluck(4)
                    .reduce( function (a, b) {
                        return a + b*1;
                    }, 0);

                var canvasTotal = rows
                    .data()
                    .pluck(5)
                    .reduce( function (a, b) {
                        return a + b*1;
                    }, 0);

                var buildingTotal = rows
                 .data()
                 .pluck(6)
                 .reduce( function (a, b) {
                     return a + b*1;
                 }, 0);

                return $('<tr/>')
                    .append( '<td colspan="4">Totals:</td>' )
                    .append( '<td>'+kmTotal+'</td>' )
                    .append( '<td>'+canvasTotal+'</td>' )
                    .append( '<td>'+buildingTotal+'</td>' );
            },
            dataSrc: 0
        },
    } );

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Hi @Glyndwr ,

    Not by default, but you can do some clever stuff to make it work, see here. I've made the assumption that one column would be unique, the Name column in that examples case. Hope that helps.

    Regarding the NaN, please post a link to that page, or modify my example to show it, and I'll be happy to take a look,

    Cheers,

    Colin

  • GlyndwrGlyndwr Posts: 117Questions: 32Answers: 0

    Hi Colin,

    I am using scrolling to remove the paging issue. I will try to get an example of the NaN (which I suspect stands for not a number) posted. The fields were string so I have made sure the returned field are integer and float. This did not resolve the issue.

    Kind regards,

    Glyn

  • GlyndwrGlyndwr Posts: 117Questions: 32Answers: 0

    Hi Colin,

    This is the example which has two issues now. First the NaN and second the grouping from my previous question is not showing.

    http://live.datatables.net/kamequta/1/edit

    Kind regards,

    Glyn

  • colincolin Posts: 15,112Questions: 1Answers: 2,583
    Answer ✓

    Hi @Glyndwr ,

    The object has different member variables, so that's why the groupings and the totals aren't showing. See here.

    Cheers,

    Colin

  • GlyndwrGlyndwr Posts: 117Questions: 32Answers: 0

    Perfect! Thank you.

  • IT Operation KalimantanIT Operation Kalimantan Posts: 7Questions: 3Answers: 0

    can I have script fixed ?

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

    Colin posted a link to it:
    http://live.datatables.net/kamequta/2/edit

    Kevin

  • IT Operation KalimantanIT Operation Kalimantan Posts: 7Questions: 3Answers: 0
    edited February 2020

    script not showing, can I have example from jsfiddle ?

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

    When you click the link I provided did you scroll to the bottom of the Javascript tab? The script is there.

    Kevin

This discussion has been closed.