jQuery datatable footer with total rows from the ajax output

Question

I am trying to use the fnFooterCallback to sum the amounts in a column as a total, the part that I can not figure out yet is, that I need the total for that page which I'm getting fine from the aaData.

Any idea on how to display the footer with the output we got in aaData using ajax output?

Answer 1

Not sure if this is what you're looking for but I give it a shot.

In order to display in the footer, place this code after the <thead> and <tbody>

<tfoot>
  <tr>
    <th>Total:</th> 
    <th></th>
  </tr>
</tfoot>

So it can be displayed in the footer.

Than add this to the initiation:

"fnFooterCallback": function ( nRow, aaData, iStart, iEnd, aiDisplay ) {
    /*
     * Calculate the total market share for all browsers in this table (ie inc. outside
     * the pagination)
     */
    var iTotalMarket = 0;
    for ( var i=0 ; i<aaData.length ; i++ )
    {
        iTotalMarket += aaData[i][1]*1;
    }

    /* Calculate the market share for browsers on this page */
    var iPageMarket = 0;
    for ( var i=iStart ; i<iEnd ; i++ )
    {
        iPageMarket += aaData[ aiDisplay[i] ][1]*1;
    }

    /* Modify the footer row to match what we want */
    var nCells = nRow.getElementsByTagName('th');
    nCells[1].innerHTML = parseInt(iPageMarket);
}

change the number in the aaData[i][1] to which column you want to calculate (starting by 0, not by 1).

Note: This won't work if you have a special character in the row, will need to cut it.