My datatable works very well, it does not show any errors in the console even after I added footercallback as the example of the official datatables page shows link . However, it does not show me the sum of the totals.
What I could notice is that in the example of the official page they are using jquery-1.12.4.js and I use the version jquery-3.1.1.js, I think that the error should be here, but there is no documentation on footercallback in version 3.1.1, ayudaaaa !!!!!
function listar()
{
tabla=$('#tbllistado').dataTable(
{
"aProcessing": true,//Activamos el procesamiento del datatables
"aServerSide": true,//Paginación y filtrado realizados por el servidor
dom: 'Bfrtip',//Definimos los elementos del control de tabla
buttons: [
'copyHtml5',
'excelHtml5',
'csvHtml5',
'pdf'
],
"ajax":
{
url: '../ajax/ingreso.php?op=listar',
type : "get",
dataType : "json",
error: function(e){
console.log(e.responseText);
}
},
"bDestroy": true,
"iDisplayLength": 5,//Paginación
"order": [[ 0, "desc" ]]//Ordenar (columna,orden)
},
{
"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( 3 )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Total over this page
pageTotal = api
.column( 3, { page: 'current'} )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Update footer
$( api.column( 3 ).footer() ).html(
'$'+pageTotal +' ( $'+ total +' total)'
);
}
}).DataTable();
}<div class="panel-body table-responsive" id="listadoregistros">
<table id="tbllistado" class="table table-striped table-bordered table-condensed table-hover">
<thead>
<th>Opciones</th>
<th>Fecha Ingreso</th>
<th>Proveedor</th>
<th>Total Compra</th>
<th>Estado</th>
</thead>
<tbody>
</tbody>
<tfoot>
<th colspan="3" style="text-align:right">Total:</th>
<th></th>
</tfoot>
</table>
</div>