Add a second row to a footer

Add a second row to a footer

dougmdougm Posts: 23Questions: 3Answers: 0
edited February 8 in DataTables 1.10

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]));
                }
            },

This question has an accepted answers - jump to answer

Answers

  • dougmdougm Posts: 23Questions: 3Answers: 0
    edited February 8

    This didn't format correctly! I will edit

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794
    Answer ✓

    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

  • dougmdougm Posts: 23Questions: 3Answers: 0

    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>
    

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794

    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

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794
    edited February 8

    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

  • dougmdougm Posts: 23Questions: 3Answers: 0

    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!

Sign In or Register to comment.