"initComplete": function works but "footerCallback": function does not
"initComplete": function works but "footerCallback": function does not
luisalves
Posts: 1Questions: 1Answers: 0
Hi. I'm trying to put totals in the footer of the dataTable, but the footerCallback does nothing to the table, while initComplete does.
I have tried it in FSFiddle and I make it work, while in my php page the same layout does not present a sum footer.
This is the include css and jquery files:
<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>
My footer.php page, is where the scripts are located, this is the one that works but does have the current page total:
<script type="text/javascript">
var table = $('#myTable').DataTable({
"initComplete": function (settings, json) {
this.api().columns('.sum').every(function () {
var column = this;
var sum = column
.data()
.reduce(function (a, b) {
a = parseInt(a, 10);
if(isNaN(a)){ a = 0; }
b = parseInt(b, 10);
if(isNaN(b)){ b = 0; }
return a + b;
});
$(column.footer()).html('Soma: ' + sum);
});
}
});
Why cant I make "footerCallback" function work? And why does the **initComplete" and the "footerCallback" doesn't?
This discussion has been closed.