Add a second row to a footer

dougm

I have the following footer call back and I would like to add a second row,
The code below works perfectly I just need to add another row that will be some equations.
I can not for the life of me figure it out or find a working example.
Any help would be appreciated.

            "footerCallback": function ( row, data, start, end, display ) {
                var api = this.api(), data;
                var intVal = function ( i ) {
                    return typeof i === 'string' ?
                        i.replace(/[\$,]/g, '')*1 :
                        typeof i === 'number' ?
                            i : 0;
                };
                var total_amount = api
                    .column(2)
                    .data()
                    .reduce( function (a, b) {
                        return intVal(a) + intVal(b);
                }, 0 );
                
                for ( let i = 0; i < arr.length ; i++){
                    colValArr[i] =  api
                    .column(i + 3)
                    .data()
                    .reduce( function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0 ); 
                }
                
                $(api.column(0).footer()).html("Total " + total_title);
                $(api.column(2).footer()).html(formatCurrency(total_amount));
                for ( let i = 3; i < arr.length + 3; i++){
                    $(api.column(i).footer()).html(formatCurrency(colValArr[i-3]));
                }
            },

dougm

This didn't format correctly! I will edit

kthorngren

DataTables only keeps track of the first tfoot row. You can access the second row using standard jQuery techniques, for example:
https://live.datatables.net/rabeyega/1/edit

Kevin

dougm

Why does the second row end up first??

$(api.column(0).footer()).html("Total " + total_title);
                $(api.column(2).footer()).html(formatCurrency(total_amount));
                for ( let i = 3; i < arr.length + 3; i++){
                    $(api.column(i).footer()).html(formatCurrency(colValArr[i-3]));
                }
                
                
                $('#otherRevenueEntries tfoot tr:nth-child(1) th:nth-child(1)').html('Net Income (before tax)');
                $('#otherRevenueEntries tfoot tr:nth-child(1) th:nth-child(2)').html('BLANK!');
                $('#otherRevenueEntries tfoot tr:nth-child(1) th:nth-child(3)').html('123.45');
                $('#otherRevenueEntries tfoot tr:nth-child(1) th:nth-child(4)').html('123.45');
                $('#otherRevenueEntries tfoot tr:nth-child(1) th:nth-child(5)').html('123.45');
                $('#otherRevenueEntries tfoot tr:nth-child(1) th:nth-child(6)').html('123.45');
                $('#otherRevenueEntries tfoot tr:nth-child(1) th:nth-child(7)').html('123.45');

My table definition is as follows

<table id="otherRevenueEntries" class="display responsive" style="width:100%;height:100%">
    <caption>Other Revenue (expense)</caption>
    <thead>
        <tr>
          <c:forEach var="entry" items="${headers}">
              <th>${entry}</th>
          </c:forEach>
        </tr>
    </thead>
    <tfoot>
        <tr>
          <c:forEach var="entry" items="${headers}">
              <th></th>
          </c:forEach>
        </tr>
        <tr>
          <c:forEach var="entry" items="${headers}">
              <th></th>
          </c:forEach>
        </tr>
    </tfoot>
</table>

kthorngren

It doesn't in this example:
https://live.datatables.net/rabeyega/2/edit

I don't see anything obvious in your code snippets. Can you provide a link to a test case showing the issue?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

kthorngren

One option might be to add a classname to the second row and use that as part of the selector, for example:

    <tfoot>
        <tr>
          <c:forEach var="entry" items="${headers}">
              <th></th>
          </c:forEach>
        </tr>
        <tr class="net-income">
          <c:forEach var="entry" items="${headers}">
              <th></th>
          </c:forEach>
        </tr>
    </tfoot>

$('#otherRevenueEntries tfoot tr.net-income th:nth-child(1)')

But that might not answer or fix why Datatables seems to be using the second tr.

However you could inspect the page to see if the tr with the assigned classname is first or second. To make sure Datatables isn't swapping them, I've never seen this though, you could comment you the init code hand verify how the HTML table is built.

Kevin

dougm

Thank you for your help! As usual it was a problem between keyboard and chair! I have 2 methods for loading balance sheet and Income statement details and I was appending the row in the wrong method thus appending before the data was rendered!