Well i can make it work in JSFiddle but not in my site. Just copied the table data from my php page and removed the for each loop and replaced with some data.
You can see the JSFiddle here.
Why cant I replicate the JSFiddle in my php page?
UPDATE I get in script console the following: return window.wrappedJSObject || window;
My php Output is this:
<div>
<table class="table table-striped table-bordered table-hover" id="myTable">
<div><h2>Mapa Analítica</h2></div>
<thead>
<tr>
<th class="text-center" style="vertical-align:middle;">Name</th>
<th class="text-center">Tipo Documento</th>
<th class="text-center">Número</th>
<th class="text-center">Cliente</th>
<th class="text-center">Obra</th>
<th class="text-center">Designação</th>
<th class="text-center">Agregado</th>
<th class="text-center sum">Quantidade (ton)</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</tfoot>
<tbody>
<?php foreach ($positions as $position): ?>
<tr>
<td class="text-center"><?= $position["data"] ?></td>
<td class="text-center"><?= $position["tipo"] ?></td>
<td class="text-center"><?= $position["num"] ?></td>
<td class="text-center"><?= $position["cliente"] ?></td>
<td class="text-center"><?= $position["obra"] ?></td>
<td class="text-center"><?= $position["nome_obra"] ?></td>
<td class="text-center"><?= $position["agr"] ?></td>
<td class="text-center"><?= $position["ton"] ?></td>
</tr>
<?php endforeach ?>
</tbody>
</table>
The js function located in footer.php is this:
$(document).ready(function() {
$('#myTable').DataTable( {
"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( '.sum' )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Total over this page
pageTotal = api
.column( '.sum', { page: 'current'} )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Update footer
$( api.column( '.sum' ).footer() ).html(
'$'+pageTotal +' ( $'+ total +' total)'
);
}
} );
} );
In the head element I included all the following:
<head>
<!-- jquery para colocar a cor vermelha no navbar -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- BOOTSTRAP -->
<link href="../public/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link href="../public/css/style.css" rel="stylesheet"/>
<script src="../public/js/bootstrap.min.js"></script>
<!-- jquery para choosen ver: https://harvesthq.github.io/chosen/ e dataTables ver: https//www.datatables.net
também para datetimepicker ver:https://eonasdan.github.io/bootstrap-datetimepicker/-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
<link rel="stylesheet" href="../public/js/DataTables-1.10.12/media/css/dataTables.bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.1.2/css/fixedHeader.dataTables.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.js"></script>
<script src="../public/js/DataTables-1.10.12/media/js/jquery.dataTables.min.js"></script>
<script src="../public/js/DataTables-1.10.12/media/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/fixedheader/3.1.2/js/dataTables.fixedHeader.min.js"></script>
