How to create % calculation on a value in the footer?

atataylor

How to create % calculation on a value in the footer?
I have this code creating a total in the footer:

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

And this code creating % values for the rows in the table:

columnDefs: [
  {
    targets: 7,
    render: function (data, type, row) {
      return (row[5] / row[4] * 100).toFixed(0) + '%';
    }
  },
        
  {
    targets: 8,
    render: function (data, type, row) {
      return (row[6] / row[4] * 100).toFixed(0) + '%';
    }
  },
    
]

What I am trying to do is create the same % calculation above on the values in the footer. To my mind it should look something like this:

$( 'tr:eq(0) th:eq(4)',api.column( 5).table().footer() ).html(numberRenderer( pageTotal / (row[4]* 100).toFixed(0) + '%' ));
    
     $( 'tr:eq(1) th:eq(4)',api.column( 6).table().footer() ).html(numberRenderer( total/ (row[4]* 100).toFixed(0) + '%' ));

But I get the error NaN% in both places where I expected to get the % result.

kthorngren

See this thread about getting the columns.render data in the footerCallback.

Kevin

atataylor

@kthorngren
Hi Kevin thanks for your input, from the links you kindly provided looks like I am completely wrong, so back to the drawing board for me with this one. I don’t have enough knowledge of either datatables or javascript to make useful sense of the info in the links, but thanks anyway, that’s my problem. I have spent quite some time looking for working examples of calculations on footer values but not found anything yet, I can work with. If you come across any, please let me know. Thanks. Regards
Alan

atataylor

This is an image with ? question marks showing that data I am trying to calculate and where that data should go

kthorngren

Can you build a simple working test case with an example of your data and your above code snippets? This way we can see exactly what you have to offer suggestions.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

atataylor

Hi Kevin

Please see example with the link below. Many thanks for your help.
http://live.datatables.net/sofakoru/1/edit?html,js,console,output
Regards
Alan

kthorngren

Thanks for the test case. That helps to see what you are doing. Here are the issues:

1. row[4] is not available in the footerCallback. You should use the pageTotal and total calculations.
2. Create individual variables for each column to calculate the percentages.
3. No need to use the numberRender() function if you are formatting the number by appending %. You could create a new number renderer to handle the percentages. I show an example of this. The number renderer docs are here.
4. You need to change the parenthesis if you are using toFixed(), like this:

.html( (pageTotal3 / pageTotal2 * 100).toFixed(0) + '%' );

See the updated example:
http://live.datatables.net/yucajika/1/edit

I updated the page total footer with changes for 3 and 4 so you can choose the way you want to display the numbers. I didn't change the 2nd footer so you can compare with what you had.

Kevin

atataylor

Thank you, Kevin, for a very clear and detailed response, not only providing the correct solution but also a precise explanation of what I did wrong. There are many lessons here for me to learn and I am grateful for your help, expertise, and advice.

Thanks again.

Regards
Alan