Question

I am using this jquery datatable plugin to display information from database. My table looks like following. Now I am trying to sum up the marks (please check the table below) and show them as total marks just like in the example given here in this website

<script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf-8">
 $(document).ready(function() {$('#gtable').dataTable();} );
  </script>

<table class="gtable" align="center" id="gtable">
<thead>
 <tr>
    <th>Sl</th>
    <th>Name</th>
    <th>Marks</th>
 </tr>
</thead>

<tbody>
 <tr><td>1</td> <td>Charlie Sheen</td>  <td>20</td></tr>
 <tr><td>2</td> <td>John Cryer</td>     <td>20</td></tr>
 <tr><td>3</td> <td>Jason Stathum</td>  <td>20</td></tr>

</tbody>

</table

The plugin’s website have provided the following code to do and show the summation but I still don’t understand how to use it my data table above.

Could you please help me with this?

  $(document).ready(function() {
  $('#example').dataTable( {
    "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][4]*1;
        }

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

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

Answer 1

The function should like this

$('#example').dataTable( {
  "fnFooterCallback": function ( nRow, aaData, iStart, iEnd, aiDisplay ) {

    var TotalMarks = 0;
    for ( var i=0 ; i<aaData.length ; i++ )
    {
        TotalMarks += aaData[i][2]*1;
    }

    var nCells = nRow.getElementsByTagName('th');
    nCells[1].innerHTML = TotalMarks;
  }
});

Hope this will help.