Sumowanie wierszy poza pętlą

Cześć,

Od jakiegoś czasu męczę się z utworzeniem wiersza sumującego wartości z tabeli.
Tak wygląda tabela w pętli While:

printf("<div class='panel panel-default%s'>
						    <div class='panel-heading' role='tab' id='heading%s'>
						      <h4 class='panel-title'>
						        <a role='button' data-toggle='collapse' data-parent='#accordion' href='#collapse%s' aria-expanded='false' aria-controls='collapse%s'>
						          	<table class='table' id='suma' style='border-top: 0px solid white; margin-bottom: 0px;'>
						          	<tbody>
						        		<tr style='font-weight: bold;'>
						        			<td class='col-md-4'>%s</td>
						        			<td class='col-md-2'>Zap: %s</td>
						        			<td class='col-md-2 success'>AKC: %s</td>
						        			<td class='col-md-1'>W: %s</td>
						        			<td class='col-md-1'>Dod: %s</td>
						        			<td class='col-md-1%s'>Nod: %s</td>
						        			<td class='col-md-1'>Odr: %s</td>
						        		</tr>
						        		</tbody>						        		
						        	</table>						        	
						        </a>
						      </h4>
						    </div>		

Kod JavaScript który mam do sumowania innych tabel:

$(document).ready(function() { 
    $('#suma').DataTable( {
      "columnDefs": [ {
        "targets": [1],
        // "render": function() { return "30"}
      }], 
      "footerCallback": function ( row, data, start, end, display ) {
            var api = this.api();
 
            // 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;
            };
 
            rendered = api
                .cells( null, 1, { page: 'current'} )
                .render('display')
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );            
            // Update footer
            $( api.column( 1 ).footer() ).html(
              ''+ rendered
            );
        }
    });

});

Tak wygląda tabela:

Jak widać ostatni wiersz nie sumuje, a w kodzie wygląda on tak, dodany poza pętlą while:

echo "<div class='panel panel-default'>
						    <div class='panel-heading' role='tab'>
						      <h4 class='panel-title'>						       
						          	<table class='table'  style='border-top: 0px solid white; margin-bottom: 0px;'>
						          	<tfoot>
						        		<tr style='font-weight: bold;'>
						        			<th class='col-md-4' rowspan='1' colspan='1'>Suma</th>
						        			<th class='col-md-2' rowspan='1' colspan='1'>Zap: </th>
						        			<th class='col-md-2 success' rowspan='1' colspan='1'>AKC: </th>
						        			<th class='col-md-1' rowspan='1' colspan='1'>W: </th>
						        			<th class='col-md-1' rowspan='1' colspan='1'>Dod: </th>
						        			<th class='col-md-1' rowspan='1' colspan='1'>Nod: </th>
						        			<th class='col-md-1' rowspan='1' colspan='1'>Odr: </th>
						        		</tr>
						        		</tfoot>
						        	</table>						        
						      </h4>
						    </div>";

Powinieneś stworzyć jedną tabelę, a nie n tabel - w pętli tworzysz za każdym razem nowy znacznik <table>.

Prawie prawidłowo powinno to wyglądać mniej-więcej tak:

<div class="panel panel-default">
  <table id="suma" class="table">
    <thead>
      <!-- ... -->
    </thead>

    <tbody>
      <?php foreach ($rows as $row): ?>
        <tr>
          <td><?= $row['foo'] ?></td>
        </tr>
      <?php endforeach; ?>
    </tbody>

    <tfoot>
      <tr>
        <td></td>
      </tr>
    </tfoot>
  </table>
</div>

Całkowicie prawidłowo powinieneś wykorzystać jakiś silniik szablonów, np. Blade lub Twig.

Btw, co to za potwór-funkcja:

            var intVal = function ( i ) {
                return typeof i === 'string' ?
                    i.replace(/[\$,]/g, '')*1 :
                    typeof i === 'number' ?
                        i : 0;
            };