HTML fakeFooter "injected" in datatables footer

ciprian.paunica@gmail.com

Hi,

I want to have a responsive solution for table footer; so, in my HTML i create a new table called "fakeFooter" wich are desplaying two totals from my table, calculated using footerCallback and outputed with document.getElementById in <SPAN> elements.

Is there a way to "inject" that "fakeFooter" in table footer? Please see the image attached.

Below my code:

<table width="100%" class="table table-striped table-bordered table-hover" id="avertizariLista">

<!-- dates from MySQL -->

</table>

<!-- fakeFooter div -->

<div id="fakeFooter" class="visible-xs clearfix" style="margin-top:100px;">
<table width="100%" class="table table-striped table-bordered table-hover">
    <tr>
        <td><strong>Total selectie:</strong></td>
        <td class="text-right"><strong><span id="totalSelectieDiv"></span></strong></td>
    </tr>
    <tr>
        <td><strong>TOTAL:</strong></td>
        <td class="text-right"><strong><span id="totalTabelDiv"></span></strong></td>
    </tr>
</table>
</div>

<!-- end fakeFooter div -->

My code:

    dom: 'Bfrtlip',

    "footerCallback": function ( row, data, start, end, display ) {
        var api = this.api(), data;

        // Remove the formatting to get integer data for summation
        var intVal = function ( i ) {
            return typeof i === 'string' ?
                i.replace(/[\$,]/g, '')*1 :
                typeof i === 'number' ?
                    i : 0;
        };

        // Total over all pages
        total = api
            .column( 5 )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );

        // Total over applied filters
        pageTotal = api
            .column( 5, { filter: 'applied'} )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );

        // Update footer
        $( api.column( 5 ).footer() ).html(
            'Selectie: '+pageTotal +' <br />Total: '+ total
        );
        document.getElementById('totalSelectieDiv').innerHTML=pageTotal;    // GENERATE OUTPUT FOR FIRST ROW OF fakeDiv
        document.getElementById('totalTabelDiv').innerHTML=total;           // GENERATE OUTPUT FOR SECOND ROW OF fakeDiv
    }