Total not visible for footerCallback on the live server
Total not visible for footerCallback on the live server
dannerbam
Posts: 11Questions: 1Answers: 0
Sorry for my english. Google translator!
I have included a datatable that also works great. Now I want to display the totals. Unfortunately that doesn't work. The sum is displayed in the console log, as well as in live.datatables.net, but not on the live server.
Maybe someone can help me and knows what's to blame. Unfortunately I can't figure it out.
What I have to add, the data comes from a mySQL database.
Here is the example on the datatables test server:
live.datatables.net/majajoqa/1/edit
And here is the script from the live server::
$(document).ready(function() {
$('#datatable').DataTable({
"lengthMenu": [[25,50,100,500,-1], [25,50,100,500,"Alle"]],
/* "dom": 'lBfrtip', */ //Formatierung
"dom": "<'row'<'col-sm-12 col-md-6'lB><'col-sm-12 col-md-6'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
"buttons": [
{
extend: 'searchPanesClear',
text: 'Projekt hinzufügen',
className: 'btn btn-sm btn-gruen2 mt-2',
attr: {
'data-toggle': 'collapse',
'href' : '#kundenformularaufklappen',
}
},
{
text: ' ',
className: 'btn btn-sm btn-light mt-2',
action: function ( e, dt, button, config ) {
window.location = '#';
}
},
{
extend: 'print',
text: 'drucken',
className: 'btn btn-sm btn-orange1 mt-2',
autoPrint: true,
exportOptions: {
columns: ':visible'
}
},
{
extend: 'print',
text: 'selektierte drucken',
className: 'btn btn-sm btn-orange2 mt-2',
autoPrint: true,
exportOptions: {
columns: ':visible'
}
},
{
text: ' ',
className: 'btn btn-sm btn-light mt-2',
action: function ( e, dt, button, config ) {
window.location = '#';
}
},
{
text: 'Controlling',
className: 'btn btn-sm btn-prim1 mt-2',
action: function ( e, dt, button, config ) {
window.location = '?sb=ee_lager&sp=0';
}
},
{
text: 'Adressen',
className: 'btn btn-sm btn-prim2 mt-2',
action: function ( e, dt, button, config ) {
window.location = '?sb=ee_lager&sp=1';
}
},
{
text: 'Infos',
className: 'btn btn-sm btn-prim3 mt-2',
action: function ( e, dt, button, config ) {
window.location = '?sb=ee_lager&sp=2';
}
}
],
select: true,
colReorder: true,
"language": {
"select": {
rows: {
_: "%d Projekte ausgewählt",
0: "Projekte anklicken um sie auszuwählen",
1: "1 Projekt ausgewählt"
}
},
"emptyTable": "Keine Daten in Tabelle vorhanden",
"zeroRecords": "Keine passenden Einträge gefunden",
"lengthMenu": "Zeige _MENU_ Einträge pro Seite",
"info": "Zeige Seite _PAGE_ von _PAGES_ (_TOTAL_ Einträge gesamt),",
/* "info": "Zeige _START_ bis _END_ von _TOTAL_ Einträgen", */
"infoEmpty": "Keine Einträge Verfügbar",
"search": "Suche:",
"infoFiltered": "(gefiltert von _MAX_ Einträgen)",
"paginate": {
"first": "Erste",
"last": "Letzte",
"next": "Nächste",
"previous": "Vorige"
},
},
"columnDefs": [ // Spalten ausblenden
{
target: [0],
//visible: false,
searchable: true,
},
],
/* order: [[18, 'desc'], [5, 'asc'], [1, 'asc']], */
"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( 22 )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Total over this page
pageTotal = api
.column( 22, { page: 'current'} )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Update footer
$( api.column( 22 ).footer() ).html(
'€ '+pageTotal +' ( € '+ total +' total)'
);
}
} );
console.log(pageTotal);
console.log(total);
} );
The output from the console:
187790.13999999998 datatable_projekte.js:141
187790.13999999998 datatable_projekte.js:142
Maybe someone can also say in passing why the sum is not 187790.14 but 187790.13999999998?
I will send the corresponding php code in the next post
Thanks in advance.
Johann
This question has an accepted answers - jump to answer
Answers
Here the php page from the datatable from the live server: (PART 1)
Here the php page from the datatable from the live server: (PART 2)
Here the php page from the datatable from the live server: (PART 3)
You are trying to update the footer for column 22:
But only have 14 columns defined in the footer:
Either use
api.column( 13 ).footer()to select the lastthyou defined or create more columns in the footer.Kevin
The table has 24 columns. A few of them are hidden with "display:none". You can see in Post 2.
The point being that the selector
$( api.column( 22 ).footer() )is not finding a correspondingthbecause there is not a correspondingthdefined in the footer. It might be easiest to just at anidattribute to thethyou want the total displayed and use that as the selector.Kevin
According to the console output, the sum is calculated, just not displayed.
That's the strange thing.
Output from Console:
The problem isn't with the code performing the sum. The problem is the jQuery selector (
$( api.column( 22 ).footer() )) isn't finding an element in the DOM so its not displaying the total.Go to your console and type this
$( $('#datatable').DataTable().column( 22 ).footer() ).length. What is the result?Do you get something like this?
Now try
$( $('#datatable').DataTable().column( 1 ).footer() ).length. You should see1in the console.Kevin
When does this occur?
Kevin
Sorry, i was too fast.
By typing this
the result i "0"
Ok. Like I said the selector is not finding the DOM element because you haven't defined it in the footer. My suggestion is to use the
idattribute on thethwhere you want the total displayed and update your selector accordingly.for example:
Kevin
Yessss!! Thank you!
Output in the Table
Total: € 187790.13999999998 ( € 187790.13999999998 total)
Can I format the sum with 2 decimal places? It's miscalculated here.
Thank you very much!!
OK?