Hi @ all,
With following script I get a DataTables with a sum footer. I format all floats with currencyFormatter.js Combined with HTML-Tag class .monney. This works great. When I click a table headerlink to sort the table. All floats chance to -NaN €.
Has anybody a clou why this is happen and how to solve this.
$(document).ready(function() {
$.get('stock.csv', function(data) {
// start the table
var html = '<table id="example" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">';
// split into lines
var rows = data.split("\n");
// parse lines
j = 0;
rows.forEach(function getvalues(ourrow) {
if (j == 0) {
// start a table row
html += "<thead><tr>";
htmltfoot = "<tfoot><tr>";
// split line into columns
var columns = ourrow.split(";");
var arrayLength = columns.length;
for (var i = 0; i < arrayLength; i++) {
html += "<th><div>" + columns[i] + "</div></th>";
if (i == 0){
htmltfoot += "<th class=\"sum\">Total:</th>";
} else {
htmltfoot += "<th class=\"sum money\">Total:</th>";
}
}
// close row
html += "</tr></thead>";
htmltfoot += "</tr></tfoot></tbody>";
html += htmltfoot;
j++;
} else {
// start a table row
html += "<tr>";
// split line into columns
var columns = ourrow.split(";");
var arrayLength = columns.length;
for (var i = 0; i < arrayLength; i++) {
if (i == 0) {
html += "<th>" + columns[i] + "</th>";
} else {
if (columns[i] == 0){
html += "<td>" + columns[i] + "</td>";
} else {
html += "<td class='money'>" + columns[i] + "</td>";
}
}
}
// close row
html += "</tr>";
}
})
// close table
html += "</tbody></table>";
// insert into div
$('#container').append(html);
$('#example').DataTable({
"paging": false,
"footerCallback": function(row, data, start, end, display) {
var api = this.api();
nb_cols = api.columns().nodes().length;
var j = 1;
while (j < nb_cols) {
var pageTotal = api.column(j, { page: 'current'}).data().reduce(function(a, b) {
if (b > 0) {
sumAB = Number(a) + Number(b);
return sumAB.toFixed(2)
}
else{return Number(a).toFixed(2);}
}, 0);
// Update footer
$(api.column(j).footer()).html(pageTotal);
j++;
}
OSREC.CurrencyFormatter.formatAll(
{
selector: '.money',
currency: 'EUR'
});
}
});
});
// Code here end
});