datatables + 2 footers + control which one is mani

Question

here is my FIDDLE

I want to have more control over this part of the code:

        $( api.column( 4 ).footer() ).html(
            '$'+pageTotal +' ( $'+ total +' total)'
        );

I would like to apply this on my #total footer. It is currently being applied to the #search footer, and is changing the value of the #search footer in the top right of the table, when I want it to change the #total footer in the bottom right.

this is with the html like this order:

<tfoot id="search">
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Salary</th>
            </tr>
        </tfoot>
         <tfoot id="total">
            <tr>
                <th colspan="4" style="text-align:right">Total:</th>
                <th></th>
            </tr>
        </tfoot>

I can swap the footers around above, FIDDLE here, and it will appear the way I want but the multi column filter search will break. Can I achieve what I am trying here without breaking anything?

Answer 1

think i need to replace this

    $( api.column( 4 ).footer() ).html(
        '$'+pageTotal +' ( $'+ total +' total)'
    );

with this(getting the 2nd th tag of the tfoot tag with id total):

        $("tfoot#total th:nth-child(2)").html(
              '$'+pageTotal +' ( $'+ total +' total)'
        )

FIDDLE HERE

An aside(something I want ot understand better):

doing this $("tfoot th:nth-child(2)").html("33") in the console here datatables footer_callback will change the value of the 4th column in the footer.

but doing the similar command $("tfoot#total th:nth-child(2)").html("33") in the console here JSFIDDLE does not chnage it, I have to do it within the footer_callback function