How do I get the value of a table cell for applying it to the footer totals

dfer

Hi I have a datatable that has some totals in columns 8 and 9. These totals will always be in one currency however the currency they can be in varies (sometimes dollars, sometimes euros, sometimes pounds, etc).

So I have a table that looks like

Column 0 | Column 1 | Column 2 | Column 3 | Column 4 | Column 5 | Column 6 | Column 7 | Column 8 | Column 9
data | data | data | data | data | data | data | data | €111.11 | €100
data | data | data | data | data | data | data | data | €111.12 | €100
data | data | data | data | data | data | data | data | €111.13 | €100

So in the footer I have calculations that do the totals for Columns 8 and 9

  CurrencyTypeSymbol = ????
    total = api
        .column(9, { page: 'current' })
        .data()
        .reduce(function (a, b) {
            return intVal(a) + intVal(b);
        }, 0);

    // Paid total all pages
    paidtotal = api
        .column(8, { page: 'current' })
        .data()
        .reduce(function (a, b) {
            return intVal(a) + intVal(b);
        }, 0);

    // Update footer
    $(api.column(9).footer()).html(
        format2currency(total, CurrencyTypeSymbol) + ''
    );
    // Update footer
    $(api.column(8).footer()).html(
        format2currency(paidtotal, CurrencyTypeSymbol) + ''
    );

So how can I get the currency symbol (€,$,etc) from columns 8 and 9 above to be able to prepend it to the totals I calculate in the footer? I've tried several approaches including giving column 8 a class ("currencyContainer") and trying (via JQuery) to access it (using $('.currencyContainer').text()) but nothing works. Any help would be appreaciated.

colin

Hi @dfer ,

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

dfer

Thanks Colin, there is an example of something similar to this on codepen, link below

https://codepen.io/jean2607/pen/gzPGNd

So this sample does what I am doing in my code, let's say you wanted to substitute the "$" sign shown on the footer totals with a currency sign from any value in column 4 how would you do it?

I was able to get it done for the codepen above by simply adding a class called ".currencyContainer" to the <td> that contains the number for column 4 and then in js doing

var curSymbol = $('.currencyContainer').text().substring(0,1);
.
.
.
// Update footer
$( api.column( 4 ).footer() ).html(
curSymbol + pageTotal +' (' +curSymbol+ total +' total) ('+curSymbol + sumCol4Filtered +' filtered)'
);

But I cannot do this when in the "FooterCallback" function that would normaly calculate the footer, example of this would be https://hr.oop.cmu.ac.th/data/appointment/js/DataTable/examples/advanced_init/footer_callback.html

kthorngren

You could use cell().data() to get the value in the first row. For example:

  // Update footer
  $(api.column(9).footer()).html(
      var CurrencyTypeSymbol = api.cell(0, 9).data();
      // Parse CurrencyTypeSymbol to extract the symbol

      format2currency(total, CurrencyTypeSymbol) + ''
  );

Kevin

dfer

Much appreciated Kevin, this worked like a charm for me. And it's a more elegant solution than just hacking a class name and modifying via the DOM.