DataTables logo DataTables

get sum of all columns at tfooter
  • hello all,

    i am trying to get the sum of each column, how should i do that ?

    i have used a table on more then 12 pages, and defined at first home page which is included at all pages,
    here is code with i want to show the sum of each column


    //"bJQueryUI": true,
    "sScrollX": "110%",
    "bScrollCollapse": true,
    "iDisplayLength": 10,
    ////// add more show per page list "aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]];
    "sDom": 'rt<"bottom"iflp<"clear">>',
    "sPaginationType": "full_numbers"
    } )

  • What you can do is something like:


    That will give you an array of data from the 4th column which you can sum as you would do any other array :-)

  • Hello ,

    any example for this ? i have tried but can not have the values for the columns

  • Here is my code from above running: . Have a look at the console in your browser and you'll see the data array.

  • Good work Allan, Is there any way i can output the sum result in a div. An example will do, thanks
  • Hi there, did you manage to resolve this, I am looking to do the same, when I looked at Allans example it doesnt appear to show summary in footer?

  • Hi Allan, many thanks for the reply, I did indeed see that example and several others but not being good with js I am still struggling. Using your excellent example I did manage to sum a single column but cannot fathom out how to sum multiple from dynamic table. I edited your code to simply sum a column [1] as such;

    <script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
    $('#example').dataTable( {
    "fnFooterCallback": function ( nRow, aaData, iStart, iEnd, aiDisplay ) {
    var iTotalCases = 0;
    for ( var i=0 ; i<aaData.length ; i++ )
    iTotalCases += aaData[i][1]*1;
    /* Calculate the market share for browsers on this page */
    var iPageCases = 0;
    for ( var i=iStart ; i<iEnd ; i++ )
    iPageCases += aaData[ aiDisplay[i] ][2]*1;
    /* Modify the footer row to match what we want */
    var nCells = nRow.getElementsByTagName('th');
    nCells[1].innerHTML = parseInt(iPageCases * 100)/100 +
    } );
    } );

    Also tried this but doesn't output the summary;
     <script type="text/javascript" charset="utf-8">
        $(document).ready(function() {
         console.log( $('#example').dataTable()._('td:nth-child(2)') )
    	 } );

    Kind Regards

  • Does anyone know how much the paid support is?

This discussion has been closed.
All Discussions

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!


Get useful and friendly help straight from the source.