How to split footer data into two rows

How to split footer data into two rows

atatayloratataylor Posts: 35Questions: 7Answers: 0

My code is not producing expected result with multiple row footer. After doing some research on this site I have come up with the following code. The code places the total results for the page and overall total for the table in the footer, side by side. What I am trying to do is show the second total on a second row in the footer.
This code shows both totals side by side:

$( api.column( 5).footer() ).html(
                numberRenderer( pageTotal ) +' - '+ numberRenderer( total ) 
            );

I have changed it to this:

$(  'tr:eq(0) th:eq(1)',api.column( 5).footer() ).html(numberRenderer( pageTotal ));
$( 'tr:eq(1) th:eq(1)',api.column( 5).footer() ).html(numberRenderer( total ));

Here is the footer html:

<tfoot>
    <tr>
            <th colspan="5" style="text-align:right" >Total</th>
            <th></th>
            <th></th>
          </tr>
        
    <tr>
            <th colspan="5" style="text-align:right" >Grand Total</th>
            <th></th>
            <th></th>
          </tr>
    </tfoot>

The second <th> in each row is for a different column total. No totals are shown in either row.
I also tried a short version of the code to see if it made any difference (not sure if it is valid as I am just learning js)

$('tr:eq(0) th:eq(1)',api.column( 5).footer() ).html(numberRenderer( pageTotal )+'tr:eq(1) th:eq(1)',( total ));

But same result, so I would be grateful if someone could point to my errors. Thanks

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,269Questions: 26Answers: 4,765
    Answer ✓

    The -api column().footer()` docs state this:

    The cell returned is the cell from the first row in the table tfoot element relating to the selected column. If you have multiple rows in the footer that you wish to manipulate you must use the table().footer() method to obtain the table footer element and then use standard DOM / jQuery methods to manipulate the node.

    Try using table().footer() instead.

    Kevin

  • atatayloratataylor Posts: 35Questions: 7Answers: 0

    Thanks Kevin, spent hours looking for that, can't believe I missed it! You saved my sanity again. Cheers

    Regards
    Alan

This discussion has been closed.