How do I reorder row groups to be at the bottom of the table?

wafsk

Hello, the included example @ https://datatables.net/extensions/rowgroup/examples/initialisation/endRender.html that is shown on the documentation for row grouping / sums of columns is perfect. However, the row is displayed at the bottom of each group rather than all at the bottom of the table. If I have multiple groups, I'd like for all the rows to be displayed at the bottom of the table at once. Is this possible? Thank you. If this can be shown by just using the example on the site, that would be nice.

kthorngren

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

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

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

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

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

Kevin

kthorngren

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

@kthorngren Thank you for your help. It was indeed my browser forcing https on the link.

wafsk

@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

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

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

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

Thank you so much!