Answers

• kthorngren Posts: 21,364Questions: 26Answers: 4,956

  January 2022 Answer ✓

  There isn't an option for RowGroup to display the groups at the bottom of the table. You could use footerCallback for this. You could perform a sum for each unique column data by using an object with the key being the column data. Loop through the rows and keep a running total of each column data, for example each office would look like this:

  {
    London: 132,
    New York: 489,
  ....
  }
  

  Then display the object in the returned HTMl at the end of the `-option footerCallback. See this example.

  Kevin
• wafsk Posts: 7Questions: 1Answers: 0

  January 2022

  Hello @kthorngren, thank you for the swift reply.

  To my understanding, first I need to create an empty dict to hold the unique key (i.e. London, New York). Then I loop through each row doing the following:

  1) Check if that unique key exists, if so add to the key's sum value.
  2) If it does not exist, add the key and value.

  Also, I'm not sure how to display each value on a separate "row".

  Again, thank you for your help as I am a beginner coder. It is very much appreciated.
• kthorngren Posts: 21,364Questions: 26Answers: 4,956

  January 2022 Answer ✓

  Sounds like you got the idea. Here is a simple example:
  http://live.datatables.net/jidapica/1/edit

  Its based on the footerCallback example. It uses rows().every() to loop all the rows. Builds an office object with running totals from the Age column. It then generates HTML output with </br> for the line break and updates one th in the footer. The output can be formatted in any way you choose.

  Kevin
• wafsk Posts: 7Questions: 1Answers: 0

  January 2022

  Thank you for the reply @kthorngren.

  It seems the example is broken as I get a 404 Not Found error. If you could try to show me the example again, I appreciate your help on this matter!
• kthorngren Posts: 21,364Questions: 26Answers: 4,956

  January 2022 Answer ✓

  The links I posted work for me. Maybe its a browser issue.

  Kevin
• kthorngren Posts: 21,364Questions: 26Answers: 4,956

  January 2022 Answer ✓

  Here is the code in case you still can't open the link:

    $('#example').DataTable( {
      "footerCallback": function ( row, data, start, end, display ) {
        var api = this.api();
  
        var office = {};
  
        // 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;
        };
  
        // Loop through the rows to sum the ages of each office
        api.rows().every( function ( rowIdx, tableLoop, rowLoop ) {
          var data = this.data();
  
          var key = data[2];
  
          if ( ! office.hasOwnProperty( key ) ) {
            office[key] = 0;
          }
  
          office[key] += intVal(data[3]);
        } );
        
        
        var html = '';  // Output
        var keys = Object.keys(office);
  
        // Build HTML output
        keys.forEach((key, index) => {
          html += key + ': ' + office[key] + '</br>';
        });
  
        // Update footer
        $( api.column( 1 ).footer() ).html(
          html
        );
      }
    } );
  

  Kevin
• wafsk Posts: 7Questions: 1Answers: 0

  January 2022

  @kthorngren Thank you for your help. It was indeed my browser forcing https on the link.
• wafsk Posts: 7Questions: 1Answers: 0

  January 2022

  @kthorngren Hello, I tried to implement additional rows as such:

              keys.forEach((key, index) => {
                  html += '<tr><th>'+ key + ': ' + office[key] + '</br></th></tr>';
              });
  

  But it is appending rows inside of one row. Is there a way to make multiple rows? Thank you.
• colin Posts: 15,240Questions: 1Answers: 2,599

  January 2022

  We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

  Cheers,

  Colin
• wafsk Posts: 7Questions: 1Answers: 0

  January 2022 edited January 2022

  Hello @colin .
  http://live.datatables.net/wavepuke/1/edit?html,css,js,output

  I have attached a test case to this reply. This uses @kthorngren 's example he provided above. I am trying to get each unique key on a new row.
• kthorngren Posts: 21,364Questions: 26Answers: 4,956

  January 2022 Answer ✓

  You can built your on footer. This example creates a footer if it doesn't exist then empties the footer the appends the rows you want. You can use CSS to style the footer how you want. See the CSS tab.
  http://live.datatables.net/mulehevu/1/edit

  Kevin
• wafsk Posts: 7Questions: 1Answers: 0

  January 2022

  Thank you so much!